/* === GHOST PORTAL MASTER STYLESHEET === */

/* Reset & Font */
html {
  scroll-behavior: smooth;
}body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: 
    radial-gradient(circle at 50% 50%, rgba(48,9,63,0.15), transparent 70%),
    radial-gradient(circle at 30% 70%, rgba(32,5,53,0.1), transparent 60%),
    radial-gradient(circle at 70% 30%, rgba(20,1,20,0.3), transparent 65%);
  z-index: 0;
  animation: fade-glow 12s ease-in-out infinite alternate;
}
@keyframes fade-glow {
  0% {
    opacity: 0.5;
    filter: blur(20px);
  }
  100% {
    opacity: 0.7;
    filter: blur(40px);
  }
}
body {
  margin: 0;
  padding: 0;
  background: #0d0c0f;
  font-family: 'Georgia', serif;
  color: white;
}

body, html {
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
}

a {
  text-decoration: none;
  color: #e8d78a;
  margin: 0 15px;
  font-size: 1rem;
  transition: all 0.3s ease;
}

a:hover {
  color: #fff;
  text-shadow: 0 0 2px #e8d78a;
}

/* Navbar */
.navbar {
  display: flex;
  align-items: center;
  padding: 10px 40px; /* Reduced vertical padding from 30px to 10px */
  justify-content: flex-start;
  gap: 15px; /* Optional: add some horizontal spacing between logo and links */
}

/* Rest remains the same */
nav a {
  text-decoration: none;
  color: #f2e3a4;
  font-weight: 600;
  transition: all 0.3s ease;
}
nav a:hover {
  color: #fff;
  text-shadow: 0 0 6px #ffe577;
}
/* 👻 Phantom logo */
.logo img {
  height: 42px;
  width: auto;
  display: block;
  object-fit: contain;
  transition: transform 0.3s ease, filter 0.4s ease;
  filter: none;
}

/* 🔄 On hover – glow expands */
.logo img:hover {
  transform: scale(1.05);
  filter: 
    drop-shadow(0 0 2px #fff7c2)
    drop-shadow(0 0 5px #fff9d1)
    drop-shadow(0 0 8px rgba(255, 255, 200, 0.5));
}

/* Hero Section */
.hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 40px;
}
.text-section h1 {
  font-size: 2.3rem;
  line-height: 1.2;
  color: #f8e48a;
  text-shadow: 1px 1px 6px #daaa46;
  margin-bottom: 20px;
}
.text-section p {
  font-size: 1.2rem;
  color: #c4c9bb;
  line-height: 1.6;
}
/* Glowing Animation */
.live-symbol-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin-top: 40px;
}

.live-symbol-only {
  width: 140px;
  filter: drop-shadow(0 0 25px #5e0d91);
  animation: glow-pulse 5s ease-in-out infinite;
  z-index: 2;
}

.orbit-ring {
  position: absolute;
  width: 180px;
  height: 180px;
  border: 3px solid rgba(255, 215, 150, 0.5); /* thicker + higher opacity */
  border-radius: 50%;
  animation: rotateOrbit 8s linear infinite;
  box-shadow: 0 0 15px rgba(255, 215, 150, 0.4); /* subtle glow */
  z-index: 1;
}

.navbar nav a[href="whispers-app.html"],
.navbar nav a[href="ethereal-profile.html"],
.navbar nav a[href="forum.html"],
.navbar nav a[href="ghost-vault.html"] {
  display: inline-block !important; /* or block */
}

#ghostIdentityPreview {
  display: none; /* default hidden */
}

/* When enter realm overlay is shown */
#ghostIdentityPreview[style*="display: flex"] ~ main .bottom-menu {
  display: none !important;
}


/* Small tablets: 600px - 767px */
@media screen and (min-width: 600px) and (max-width: 767px) {
  /* Your existing small tablet CSS here */
  html, body {
    height: 100vh;
    margin: 0;
    padding: 0;
    overflow: hidden; /* no page scroll */
    display: flex;
    flex-direction: column;
  }

  .top-navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 60px;
    padding: 10px 20px;
    background: #0a0a0a;
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 9999;
  }

  .main-content, .landing-container {
    margin-top: 60px;
    margin-bottom: 60px;
    overflow-y: auto;
    flex-grow: 1;
  }

  .bottom-menu {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    padding: 10px 20px;
    background: #18094131;
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 9999;
  }

  .top-navbar nav, .bottom-menu nav {
    gap: 15px;
    width: 100%;
    justify-content: space-around;
    display: flex;
  }

  .top-navbar nav a, .bottom-menu nav a {
    font-size: 0.9rem;
    padding: 5px 8px;
    color: #f2e3a4;
    font-weight: 600;
  }

  .top-navbar nav a:hover, .bottom-menu nav a:hover {
    color: #e0c26d;
  }
}

/* Optional layered glow effect */
.orbit-ring::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 2px solid rgba(255, 215, 150, 0.25);
  border-radius: 50%;
  box-shadow: 0 0 20px rgba(255, 215, 150, 0.3);
  z-index: -1;
}

@keyframes rotateOrbit {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes spectralPulse {
  0%   { transform: scale(1); opacity: 0.6; }
  50%  { transform: scale(1.08); opacity: 0.9; }
  100% { transform: scale(1); opacity: 0.6; }
}

@keyframes spectralPulse {
  0%   { transform: scale(1); opacity: 0.6; }
  50%  { transform: scale(1.08); opacity: 0.9; }
  100% { transform: scale(1); opacity: 0.6; }
}

@keyframes glow-pulse {
  0%, 100% {
    filter: drop-shadow(0 0 20px #c77aff) drop-shadow(0 0 40px #c77aff);
  }
  50% {
    filter: drop-shadow(0 0 30px #d966ff) drop-shadow(0 0 50px #d966ff);
  }
}
/* Background FX */
body::before {
  content: '';
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(48,9,63,0.15), transparent 70%),
              radial-gradient(circle at 30% 70%, rgba(32,5,53,0.1), transparent 60%),
              radial-gradient(circle at 70% 30%, rgba(20,1,20,0.3), transparent 65%);
  z-index: 0;
  animation: fade-glow 12s ease-in-out infinite alternate;
}
@keyframes fade-glow {
  0% { opacity: 0.5; filter: blur(20px); }
  100% { opacity: 0.7; filter: blur(40px); }
}


:root {
  --container-width: 85%;
  --left-panel-width: 370px;
  --right-panel-min-width: 700px;
  --gap-size: 30px;
  --container-margin-left: 30px;
  --container-margin-right: auto;
  --container-margin-top: 40px;
  --container-max-width: 1400px;
}

.ghost-portal-container {
  display: flex;
  max-width: 1400px;
  width: 85%;
  margin-left: 30px;
  margin-top: 40px;
  gap: 30px;
  box-sizing: border-box;
}

.left-panel {
  width: 370px !important;
  max-width: 370px !important;
  min-width: 370px !important;
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding-right: 20px;
  border-right: 1px solid rgba(126, 119, 31, 0.05);
  box-sizing: border-box;

  overflow: hidden !important;      /* 🚫 Disable scroll */
  padding-bottom: 0 !important;     /* 🧹 Remove bottom buffer */
  scroll-padding-bottom: 0;         /* 🧼 No scroll space needed */
}


.right-panel {
  flex-grow: 1;
  
  overflow-y: auto;
  overflow-x: hidden;
  padding-left: 20px;
  height: 100vh;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

@media (min-width: 600px) and (max-width: 767px) {
  body, html {
    overflow-x: hidden;
    margin: 0;
    padding: 0;
    height: 100vh;
  }

  .ghost-portal-container {
    min-height: 100vh;
    width: 95% !important;
    margin: 0 auto !important;
    gap: 10px !important;
    display: flex;
    flex-direction: row;
  }

  .left-panel {
    width: 320px !important;
    max-width: 320px !important;
    min-width: 320px !important;
    height: 100vh !important;
    overflow-y: auto !important;
    padding-right: 10px !important;
    border-right: 1px solid rgba(126, 119, 31, 0.05) !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 40px !important;
    padding-bottom: 120px !important;
    scroll-padding-bottom: 120px;
  }

  .right-panel {
    flex-grow: 1;
    min-width: calc(100% - 320px);
    height: 100vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-left: 5px !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
  }

  .left-panel .spectral-realm-button {
    flex-shrink: 0;
    margin-bottom: 10px;
  }

  .right-panel .wall-tile {
    width: 180px !important;
    min-width: 180px !important;
  }

  input[type="file"] {
    max-width: 100%;
  }

  button {
    max-width: 48%;
    box-sizing: border-box;
  }

  /* ✅ Chat popup centered on tablet */
#ghostChatPopup {
  position: fixed !important;             
  top: 20% !important;                     /* ⬆ Higher than middle (was 50%) */
  left: 50% !important;                    
  transform: translate(-50%, -40%) !important; /* Match top % for perfect offset */
  width: 80% !important;                   
  max-width: 400px !important;             
  z-index: 9999 !important;                
  border-radius: 12px !important;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.6) !important;
  background: linear-gradient(to bottom, #0d0d0d, #151515);
  padding: 12px !important;
}

  /* ✅ Notification dropdown aligned horizontally with GHOST PORTAL */
  #ghostNotificationBar .ghost-notification-dropdown,
  #wallNotificationBar .ghost-notification-dropdown {
    right: auto !important;
    left: 0 !important;
    top: 36px !important; /* ← Aligned near the GHOST PORTAL title */
    transform: none !important;
  }

  /* ✅ Glyph Reaction Bar */
  .glyph-reactions {
    display: flex !important;
    gap: 6px !important;
    padding: 6px 8px !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
    border-radius: 8px !important;
    box-shadow: 0 0 8px rgba(100, 100, 255, 0.15) !important;
    max-width: 140px !important;
    margin-top: 4px !important;
  }

  .glyph-reactions .glyph {
    font-size: 18px !important;
  }
}

.right-panel .wall-tile {
  margin-bottom: 15px; /* Adjust this value to control vertical gap */
}
.right-panel .wall-tile:last-child {
  margin-bottom: 0;
}

/* Reduce glow around reaction icons */
.glyph-reactions .glyph {
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.3); /* lighter, smaller glow */
  transition: box-shadow 0.3s ease;
}

/* On hover, a slightly stronger glow */
.glyph-reactions .glyph:hover {
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

/* ===========================================
   Small tablets: 600–767px  (portrait & split)
   Tight, readable media recorder popup
   =========================================== */
@media screen and (min-width: 600px) and (max-width: 767px) {
  /* Popup container: centered, safe max size */
  #mediaRecordingPopup.media-popup {
    position: fixed !important;
    inset: auto 0 auto 0;            /* allow vertical control via top/bottom */
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: min(92vw, 620px) !important;
    max-width: 620px !important;
    /* Use dynamic viewport height to avoid Safari UI jumps on iPad mini */
    max-height: calc(100dvh - 24px) !important;
    top: 12px !important;
    bottom: 12px !important;
    padding: 0 !important;           /* content card handles inner padding */
    z-index: 2147483000 !important;
  }

  /* Content becomes a tidy grid: header | preview | controls | actions | note */
  #mediaPopupContent.media-popup-content {
    display: grid !important;
    grid-template-rows: auto 1fr auto auto auto;
    gap: 10px;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    padding: 12px !important;
    box-sizing: border-box !important;
    overflow: hidden !important; /* children will scroll as needed */
  }

  /* Header: keep compact */
  .media-popup-header {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 8px;
    min-height: 36px;
  }
  .media-popup-header .media-close { line-height: 1; }

  /* Preview: stable aspect ratio + internal fit */
  #previewArea {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    /* 16:9 baseline; grows/shrinks with container height */
    aspect-ratio: 16 / 9;
    max-height: 100%;
    background: #0b0b0b;
    display: grid;
    place-items: center;
  }

  /* Video/Image/Canvas should never overflow; cover for video, contain for images */
  #videoPreview {
    width: 100%;
    height: 100%;
    object-fit: cover;     /* feel free to change to 'contain' if you prefer letterboxing */
    display: block;
  }
  #imagePreview, #audioVisualizer {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
  }

  /* Expand button floats at top-right of preview */
  #expandPreview.preview-expand-btn {
    position: absolute;
    top: 6px; right: 6px;
    z-index: 2;
  }

  /* Controls: keep on one or two lines; wrap as needed */
  .media-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    align-items: center;
    padding: 6px 0;
  }
  .media-controls .ghost-btn {
    min-width: 38px;
    padding: 8px 10px;
  }

  /* Actions row */
  .media-actions {
    display: flex;
    justify-content: center;
    padding: 4px 0;
  }

  /* Note text: clamp lines and scroll if long */
  .fade-warning {
    margin: 0;
    text-align: center;
    opacity: .85;
    max-height: 3.5em;
    overflow: auto;
  }

  /* If content gets tall, let preview be flexible but never smaller than 40% of card */
  #mediaPopupContent.media-popup-content {
    grid-template-rows: auto minmax(40%, 1fr) auto auto auto;
  }
}

/* ===========================================
   Small tablets LANDSCAPE (shorter height)
   Keep preview usable and controls reachable
   =========================================== */
@media screen and (min-width: 600px) and (max-width: 767px) and (orientation: landscape) {
  #mediaRecordingPopup.media-popup {
    top: 8px !important;
    bottom: 8px !important;
    width: min(90vw, 700px) !important;
    max-height: calc(100dvh - 16px) !important;
  }
  #mediaPopupContent.media-popup-content {
    grid-template-rows: auto minmax(48%, 1fr) auto auto auto; /* give preview a bit more */
  }
  #previewArea { aspect-ratio: 16 / 10; } /* slightly taller for landscape tablets */
}

/* ===========================================
   iOS-only polish for small tablets (Safari)
   =========================================== */
@media screen and (min-width: 600px) and (max-width: 767px) {
  html.ios #mediaRecordingPopup.media-popup {
    /* sit above keyboard/notch if one appears (iPad mini on-screen keyboard) */
    bottom: calc(12px + var(--kb, 0px)) !important;
  }
  html.ios #mediaPopupContent.media-popup-content {
    -webkit-overflow-scrolling: touch;
  }
}


/* =========================
   iOS-ONLY LAYER (safe for Android)
   ========================= */

/* Prevent horizontal wobble + use modern viewport units */
html.ios, html.ios body { overflow-x: hidden; background:#000; }

/* Replace 100vh behavior on iOS so panels don’t jump */
html.ios .main-layout,
html.ios .ghost-portal-container,
html.ios .left-panel,
html.ios .right-panel {
  min-height: 100dvh;
  min-height: -webkit-fill-available;
}

/* Smooth, momentum scrolling inside key areas */
html.ios .right-panel,
html.ios #ghostChatMessages,
html.ios #ghostMediaMessages,
html.ios .section-box,
html.ios .wall-container {
  -webkit-overflow-scrolling: touch;
}

/* Keep background from rubber-banding when popups are open */
html.ios body.lock-scroll {
  position: fixed; inset: 0; width: 100%; overflow: hidden;
}

/* Fix stacking issues for fixed elements inside transformed parents */
html.ios *[style*="transform"] { transform-style: flat; }
html.ios .fixed { position: fixed; will-change: transform; }

/* Inputs >=16px to avoid iOS zoom-in */
html.ios input, html.ios select, html.ios textarea { font-size: 16px; }

/* ---------- Chat popup ---------- */
@media (max-width: 428px) {
  html.ios #ghostChatPopup.ghost-chat-popup {
    position: fixed !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 92vw !important;
    max-width: 440px !important;
    z-index: 2147483000 !important;

    /* Sit near bottom; JS sets --kb when keyboard shows */
    bottom: calc(env(safe-area-inset-bottom, 0px) + var(--kb, 16px)) !important;
    top: auto !important;
    margin: 0 !important;
  }

  /* Make the messages area flex so input bar stays visible */
  html.ios #ghostChatPopup.ghost-chat-popup {
    display: flex !important;
    flex-direction: column !important;
    max-height: calc(100dvh - 24px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
  }
  html.ios #ghostChatMessages,
  html.ios #ghostMediaMessages {
    flex: 1 1 auto;
    min-height: 0;               /* allows internal scroll */
    overflow-y: auto;
  }
}

/* ---------- Media recorder popup ---------- */
html.ios #mediaRecordingPopup.media-popup {
  position: fixed !important;
  z-index: 2147483647 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  top: auto !important;
  bottom: calc(env(safe-area-inset-bottom, 0px) + var(--kb, 24px)) !important;
}

/* Make the preview area scroll if tools overflow vertically */
html.ios #mediaPopupContent.media-popup-content {
  max-height: calc(100dvh - 40px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
  overflow-y: auto;
}

/* ---------- iPhone width bands (iOS only) ---------- */
/* Small (SE/older) */
@media screen and (max-width: 360px) {
  html.ios #ghostChatPopup { width: 94vw !important; }
}

/* Standard (most iPhones) */
@media screen and (min-width: 361px) and (max-width: 390px) {
  html.ios #ghostChatPopup { width: 92vw !important; }
}

/* Max/Plus */
@media screen and (min-width: 391px) and (max-width: 428px) {
  html.ios #ghostChatPopup { width: 88vw !important; max-width: 460px !important; }
}

/* Landscape guardrails (short heights) */
@media screen and (orientation: landscape) and (max-height: 430px) {
  html.ios #ghostChatPopup {
    bottom: calc(env(safe-area-inset-bottom) + var(--kb, 8px)) !important;
    top: auto !important;
  }
}


@media screen and (max-width: 599px) {
  /* Main padding to avoid overlap with fixed header */
  main {
    padding-top: 6px; /* smaller top padding */
    padding-left: 10px;
    padding-right: 10px;
    text-align: center;
    font-family: 'Cinzel', serif;
    color: #eedd90;
  }

  /* Hero content container margin */
  .hero-content {
    margin-top: 0;
  }

  /* Text section adjustments */
  .hero-content .text-section {
    margin-top: 0;
  }

  .hero-content .text-section h1 {
    font-size: 1.5rem; /* was 1.8rem */
    font-weight: 700;
    line-height: 1.15; /* tighter line height */
    margin-bottom: 4px; /* smaller bottom margin */
    text-shadow: 0 0 6px rgba(238, 221, 144, 0.8);
  }

  .hero-content .text-section p {
    font-size: 0.9rem; /* was 1rem */
    max-width: 260px;
    margin: 0 auto 10px; /* smaller bottom margin */
    line-height: 1.3;
  }

/* Live symbol */
.live-symbol-wrapper { 
  width: 100px;
  height: 100px;
  margin: 0 auto -10px !important; /* negative bottom margin to pull up */
  display: flex;
  justify-content: center;
  align-items: center;
}
.live-symbol-wrapper img.live-symbol-only {
  max-width: 80%;
  height: auto;
}

/* Bottom menu vertical & centered with tight spacing */
.bottom-menu {
  max-width: 260px;
  margin: -140px auto 10px; /* reduced from -700px to pull menu up */
  padding: 0 8px;
  display: flex;
  flex-direction: column;
  gap:0;
  overflow: visible;
}

.bottom-menu a {
  flex: 1 1 auto;
  width: 100%;
  margin: 0;
  padding: 2px 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: #eedd90;
  text-decoration: none;
  border: 1px solid #eedd90;
  border-radius: 8px;
  background: rgba(134, 109, 175, 0.1);
  box-shadow: 0 0 6px rgba(50, 22, 77, 0.219);
  text-align: center;
  box-sizing: border-box;
  white-space: normal;
  transition: color 0.3s ease, background 0.3s ease;
}

.bottom-menu a:hover,
.bottom-menu a:focus {
  color: #fff7b2;
  background: rgba(255, 247, 178, 0.2);
  box-shadow: 0 0 10px #fff7b2;
}

/* Mobile landing menu list */
.mobile-landing-menu {
  margin-top: 8px;
  text-align: center;
  font-family: 'Cinzel', serif;
}
.mobile-landing-menu ul {
  list-style: none;
  padding: 0;
  margin: 0 auto 15px;
  width: 100%;
  max-width: 320px;
}
.mobile-landing-menu ul li {
  margin: 4px 0;
}
.mobile-landing-menu ul li a {
  color: #eedd90;
  font-weight: 700;
  font-size: 1.3rem;
  text-decoration: none;
  text-shadow: 0 0 6px rgba(238, 221, 144, 0.8);
  display: inline-block;
  width: 100%;
  transition: color 0.3s ease;
}
.mobile-landing-menu ul li a:hover,
.mobile-landing-menu ul li a:focus {
  color: #fff7b2;
  text-shadow: 0 0 10px #fff7b2;
}
}


@media screen and (max-width: 599px) {
  html, body {
    height: 100vh !important;
    overflow: hidden !important;  /* no page scroll */
    margin: 0;
    padding: 0;
    background: #000;
  }

  .main-layout {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100vh !important;
    box-sizing: border-box;
    overflow: hidden !important;
  }

  .ghost-portal-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    height: 100% !important;
    overflow: hidden !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .left-panel {
  width: 100% !important;
  max-width: 400px !important;
  min-height: 260px !important;
  overflow-y: auto !important;  /* scroll inside left panel */
  padding: 20px 10px !important;
  margin-left: calc(50% - 190px) !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
  border-bottom: 1px solid rgba(126, 119, 31, 0.1);
  display: block !important;
  flex-shrink: 1;
  position: relative !important;
}

  .mobile-glow-divider,
  .bottom-glow-divider {
    height: 4px;
    width: 100%;
    background: linear-gradient(to right, #cebd5d54, #fff6d0, #fff6d0);
    box-shadow: 0 0 6px rgba(165, 154, 89, 0.6), 0 0 12px rgba(255, 230, 156, 0.5);
  }

  .mobile-glow-divider {
    margin-bottom: 8px;
  }

  .bottom-glow-divider {
    margin-top: -4px;
    margin-bottom: 8px;
  }

  .panel-glow-divider {
    display: none;
  }

  #ghostChatPopup {
    position: fixed !important;
    top: 14px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 92vw !important;
    max-width: 420px !important;
    margin: 0 auto !important;
    border-radius: 14px;
    background: linear-gradient(to bottom, #1a1a1a, #0f0f0f);
    box-shadow:
      0 0 16px rgba(255, 229, 119, 0.4),
      0 0 4px rgba(255, 229, 119, 0.3),
      inset 0 0 2px rgba(255, 255, 255, 0.05);
    padding: 12px 14px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(255, 229, 119, 0.2);
    transition: top 0.25s ease-in-out;
  }

  .right-panel {
    width: 100% !important;
    flex-grow: 1;
    background: #0b0b0b;
    padding: 20px 10px 100px !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;      /* enable scroll */
    scrollbar-width: none;             /* hide Firefox scrollbar */
    -ms-overflow-style: none;          /* hide IE scrollbar */
  }

  .right-panel::-webkit-scrollbar {
    width: 0;                         /* hide WebKit scrollbar */
    background: transparent;
  }

  .wall-container {
    height: auto;
    overflow-y: auto !important;
    padding-right: 6px;
    -webkit-overflow-scrolling: touch;
  }

  .wall-container::-webkit-scrollbar {
    width: 10px;
  }

  .wall-container::-webkit-scrollbar-track {
    background: transparent;
  }

  .wall-container::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, #c993ff, #e1b8ff, #ffe577, #a7fdd1, #94e8ff);
    animation: shimmerScroll 8s linear infinite;
    border-radius: 5px;
  }

  .wall-container::-webkit-scrollbar-thumb:hover {
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.35);
  }

  @keyframes shimmerScroll {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
  }

  body.mobile-chat-active {
    overflow: hidden !important;
  }
}

/* Firefox mobile ONLY: enable right-panel scroll */
@media (max-width: 599px) {
  @supports (-moz-appearance: none) {
    .right-panel {
      flex: 1 1 auto !important;
      min-height: 0 !important;     /* 🔑 lets Firefox scroll inside flex */
      height: auto !important;
      max-height: none !important;
      overflow-y: auto !important;

      /* optional: soft orange scrollbar */
      scrollbar-width: thin;
      scrollbar-color: #956ae475 transparent;
    }
  }
}

/* 📱 Firefox only - widen left panel on mobile */
@-moz-document url-prefix() {
  @media screen and (max-width: 599px) {
    .left-panel {
      width: calc(100% + 40px) !important; /* 20px extra each side */
      position: relative;
      left: -8px; /* keep current alignment */
    }
  }
}

/* 📱 Mobile ≤599px — center BOTH action panels (no vertical stretch) */
@media screen and (max-width: 599px) {
  .ghost-action-panel,
  #ghostActionPanelHover,
  #ghostActionPanelWall {
    position: fixed !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 20px) !important;
    z-index: 10000 !important;

    /* kill desktop inline positioning that stretches it */
    top: auto !important;
    right: auto !important;
    height: auto !important;
    max-height: none !important;

    /* optional: avoid flex stretching child width */
    align-items: center !important;
  }
}

@media screen and (max-width: 599px) {
  .reaction-dropdown {
    position: fixed !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    bottom: 80px !important; /* Adjust based on your layout */
    top: auto !important; /* Ensure top doesn’t override bottom */
    width: 80vw !important;
    max-width: 220px;
    border: 1px solid #cab15c;
    z-index: 9999;
  }
}

@media (max-width: 599px) {
  .reaction-dropdown {
    bottom: 20vh !important; /* ~upper third of the screen */
  }
}


/* ❌ Hide divider on desktop by default */
.panel-glow-divider {
  display: none;
}

/* Ghost Header */
.ghost-header {
  padding: 10px 15px;
  border: 1px solid #f2e3a4;
  background: #161419;
  border-radius: 10px;
  box-shadow: 0 0 15px rgba(185, 142, 255, 0.3);
  animation: ghost-fade-glow 4s ease-in-out infinite alternate;
}
@keyframes ghost-fade-glow {
  0% { box-shadow: 0 0 10px rgba(185, 142, 255, 0.1); }
  100% { box-shadow: 0 0 18px rgba(185, 142, 255, 0.35), 0 0 28px rgba(255, 200, 255, 0.15); }
}
.portal-title {
  font-size: 1.4rem;
  color: #f2e3a4;
  margin: 0;
}
.portal-tagline {
  font-style: italic;
  font-size: 0.85rem;
  color: #d8c77e;
  margin-top: 5px;
}
/* Sections */
.section-box {
  background: #161419;
  border: 1px solid #f2e3a4;
  border-radius: 10px;
  padding: 15px;
  box-shadow: 0 0 20px rgba(188, 143, 255, 0.15);
  overflow: auto;
}
.section-box h3 {
  color: #ffe577;         /* just gold */
  font-weight: bold;
  letter-spacing: 1px;
  font-size: 1.1rem;
  margin: 0 0 10px 0;
  text-shadow: none;      /* ❌ NO glow */
  cursor: default;
}
/* Status Dots & User Scroll */
.status {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 6px;
  background-color: gray;
  flex-shrink: 0;
}
.status.online { background-color: #00ff88; }
.status.offline { background-color: #ff4444; }
.status.wall-poster { background-color: #66ccff; }
.user-list { 
  list-style: none;
  padding: 0;
  margin: 0;
  overflow: visible; /* ✅ Allow content to flow naturally */
}
.user-list li {
  margin-bottom: 6px;
  transition: all 0.3s ease;
  cursor: pointer;
}
.user-list li:hover {
  color: #ffe577;
  text-shadow: 0 0 6px #b88aff, 0 0 12px #ffe577;
  transform: translateY(-1px);
}
.user-scroll::-webkit-scrollbar {
  width: 6px;
}
.user-scroll::-webkit-scrollbar-thumb {
  background: #a279ff;
  border-radius: 6px;
}
.user-scroll::-webkit-scrollbar-track {
  background: #161419;
}
/* Ping Bell */
#pingBell.ring {
  display: block !important;
  animation: bellFlash 0.6s ease-in-out;
}
@keyframes bellFlash {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.8; }
  100% { transform: scale(1); opacity: 1; }
}
.ghost-preview-screen {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: #0d0c0f;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: 'Georgia', serif;
  gap: 20px;
  z-index: 9999;
  overflow: hidden;
}
.ghost-avatar-inside {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #0d0c0f;
  border: 2px solid #a279ff;
  box-shadow: 0 0 18px #a279ff;
  opacity: 0;
  display: none;
  transition: opacity 0.5s ease-in;
}

.ghost-avatar-inside.loaded {
  display: block;
  opacity: 1;
}

.ghost-preview-screen button {
  background: #a279ff;
  color: #ffe577; /* ✅ Mystical gold text */
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 0 0 15px rgba(255, 229, 120, 0.4); /* subtle glow */
  text-shadow: 0 0 6px #ffe577; /* glowing gold text */
  transition: all 0.3s ease;
}
.ghost-preview-screen button:hover {
  background: #c8aaff;
  color: #fff;
  text-shadow: 0 0 10px #ffffff;
}

.bottom-menu {
  margin-top: 30px;
  display: flex;
  justify-content: center;
  gap: 35px;
}
.bottom-menu a {
  font-size: 1.2rem; /* ⬅️ Make this bigger if you want even more emphasis */
  color: #f2e3a4;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
}
.bottom-menu a:hover {
  color: #fff;
  text-shadow: 0 0 8px #ffe577;
}
.ghost-avatar {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 50%;
  border: 2px solid #a279ff;
  box-shadow: 0 0 18px #a279ff;
}
.ghost-header-top {
  display: flex;
  align-items: center;
  gap: 15px; /* Adds space between avatar and text */
}
.ghost-sidebar-avatar {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 6px;
  border: 2px solid #a279ff;
  box-shadow: 0 0 10px #a279ff;
}

.ghost-info-text h2 {
  margin: 0;
  font-size: 1.1rem;
  color: #cab15c;
}
.portal-tagline {
  margin: 4px 0 0;
  color: #a279ff;
  font-size: 0.85rem;
}
#ghostNameDisplay {
  font-size: 0.8rem;
  color: #66ccff;
}
.hidden {
  display: none !important;
}

.ghost-chat-popup {
  position: relative;
  margin-top: 10px;
  width: 100%;
  max-width: 100%;
  max-height: 360px;
  overflow-y: auto;
  background: #161419;
  border: 2px solid #d4c88e;
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(242, 227, 164, 0.4);
  padding: 10px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.ghost-chat-header {
  font-weight: bold;
  color: #ffe577;
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  padding: 0 8px;
  position: relative;
}

#chatWith {
  flex-grow: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 12px;
}

.ghost-chat-minimize,
.ghost-chat-close {
  margin-left: 6px;
  background: transparent;
  border: none;
  color: #ffe577;
  font-size: 20px;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.ghost-chat-minimize:hover,
.ghost-chat-close:hover {
  color: #ffffff;
  transform: scale(1.2);
}

.ghost-chat-messages {
  max-height: 140px;
  overflow-y: auto;
  margin-bottom: 8px;
  color: #f2e3a4;
}

#chatWith {
  color: #bbaf88; /* golden yellow */
  font-family: 'Cinzel', serif;
 
  font-size: 14px;
}
/* ✅ Wrap long or unbroken messages cleanly */
.ghost-chat-messages p {
  word-wrap: break-word;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}
.ghost-chat-input {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}
.ghost-chat-input input {
  flex: 1;
  padding: 6px;
  background: #2a2730;
  border: 1px solid #ffe577;
  color: white;
  border-radius: 4px;
}
.ghost-chat-input button {
  background: #ffe577;
  color: #161419;
  border: none;
  padding: 6px 10px;
  cursor: pointer;
  border-radius: 4px;
}
.ghost-chat-input button:hover {
  background: white;
}

.user-list li {
  margin-bottom: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.user-list li:hover {
  color: #ffe577;
  text-shadow: 0 0 6px #b88aff, 0 0 12px #ffe577;
  transform: translateY(-1px);
}
/* 🔮 Purple scrollbar for chat popup */
.ghost-chat-messages::-webkit-scrollbar {
  width: 6px;
}

/* 🔮 Chat Scrollbar */
.ghost-chat-messages::-webkit-scrollbar-thumb {
  background: #a279ff;
  border-radius: 4px;
}
.ghost-chat-messages::-webkit-scrollbar-track {
  background: #161419;
}

#ghostChatMessages .chat-message.glyph-message {
  padding: 10px;
  border-radius: 8px;
  background: #161419;
  border: 1px solid #ffe577;
  box-shadow: 0 0 10px rgba(255, 229, 120, 0.2);
}
.ghost-ring-wrapper {
  position: relative;
  width: 220px;
  height: 220px;
  margin-bottom: 20px;
}
.ghost-live-ring {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    #a279ff,
    #ffe577,
    #a279ff
  );
  animation: spinRing 8s linear infinite, pulseRing 3s ease-in-out infinite alternate;
  filter: blur(4px);
}
.ghost-id-text {
  font-size: 1.2rem;
  color: #b1a989;
  text-shadow: 0 0 8px #ffe577;
}

/* 🌟 Flash on Click */
.flash-screen {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: white;
  opacity: 0;
  animation: flashAnimation 1.2s forwards;
  z-index: 99999;
}
@keyframes flashAnimation {
  0% { opacity: 0; }
  40% { opacity: 0.8; }
  70% { opacity: 0.5; }
  100% { opacity: 0; }
} 
@keyframes spinRing {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes pulseRing {
  0% { opacity: 0.7; transform: scale(1); }
  100% { opacity: 1; transform: scale(1.08); }
}
.glyph-reactions {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding-top: 6px;
  width: 100%;
  border-top: 1px solid rgba(255, 229, 120, 0.2);
  font-size: 1.1rem;
  opacity: 1;                /* 👈 Always visible */
  transition: none;          /* No fade needed */
  pointer-events: auto;      /* Fully interactable */
}
.chat-message:hover .glyph-reactions {
  opacity: 1;        /* Fade in on hover */
  pointer-events: auto; /* Allow interaction once visible */
}
/* 🧙🏻 Hover Effect for Glyph */
.glyph {
  cursor: pointer;
  font-size: 1.1rem;
  text-shadow: 0 0 5px #a279ff;
  transition: transform 0.2s ease, text-shadow 0.3s ease;
}
.glyph:hover {
  transform: scale(1.2);
  text-shadow: 0 0 10px #ffe577, 0 0 15px #a279ff;
}
/* 🌟 Active Clicked Glyph */
.glyph.active {
  text-shadow: 0 0 14px #ffe577, 0 0 18px #cfaeff;
}
/* 🧵 Tooltip Style */
.glyph::after {
  content: attr(title);
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #161419;
  color: #ffe577;
  padding: 4px 8px;
  border-radius: 5px;
  white-space: nowrap;
  font-size: 0.75rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
  box-shadow: 0 0 8px rgba(255, 229, 120, 0.2);
}
.glyph:hover::after {
  opacity: 1;
}
.hidden {
  display: none !important;
}
.chat-message.glyph-message p {
  font-size: 1.2rem;
  font-style: normal;
  font-weight: 500;
  color: #f2e3a4;
}
.chat-message .glyph-reactions {
  display: flex;
  gap: 8px;
  margin-top: 6px;
  opacity: 0.3;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.global-glyph-bar {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 10px;
  padding-bottom: 8px;
}
.global-glyph-bar .glyph {
  cursor: pointer;
  font-size: 1.2rem;
  text-shadow: 0 0 6px #ffe577, 0 0 10px #a279ff;
  transition: transform 0.2s ease;
}
.global-glyph-bar .glyph:hover {
  transform: scale(1.3);
  text-shadow: 0 0 12px #ffe577, 0 0 20px #a279ff;
}
.chat-message.pinned .glyph-reactions {
  opacity: 1 !important;
  pointer-events: auto;
  transform: scale(1.05);
  box-shadow: 0 0 6px #ffe577;
}

.chat-message {
  display: block; /* Ensures one per line */
  position: relative;
  background: rgba(255, 255, 255, 0.05);
  padding: 8px 12px;
  margin-bottom: 6px;
  border-radius: 10px;
  color: #cbb1ff;
  font-size: 0.95rem;
  max-width: 90%;
  word-break: break-word;
  white-space: pre-wrap;
  box-shadow: 0 0 2px rgba(255, 255, 255, 0.1);
}

.chat-message p {
  margin: 0;
  padding: 0;
  line-height: 1.5;
  user-select: none;
  overflow-wrap: break-word;
}


/* Emoji floats inline at end of line */
.ghost-reaction-inline {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-left: 6px;
  vertical-align: middle;
  opacity: 0.9;
  pointer-events: none;
  filter: drop-shadow(0 0 2px #f2e3a4);
}

.message-text {
  flex: 1;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.ghost-bar-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}
.av-controls {
  display: flex;
  gap: 6px;
}
.ghost-av-btn {
  background: #2a2730;
  color: #ffe577;
  border: 1px solid #ffe577;
  border-radius: 6px;
  padding: 5px 8px;
  cursor: pointer;
}
.ghost-av-btn:hover {
  background: #ffe577;
  color: #161419;
}
/* ===== 🎤📹 MEDIA RECORDING POPUP (Ghostly Design) ===== */

.media-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 16px;
  border-radius: 12px;
  box-shadow: 0 0 12px 4px rgb(75, 75, 71);
  background: transparent;
  z-index: 9999;
}

/* === Outer Border Ring with Glow === */
.media-popup::before {
  content: '';
  position: absolute;
  top: -8px;
  left: -8px;
  right: -8px;
  bottom: -8px;
  border: 2px solid rgba(117, 112, 84, 0.5);
  border-radius: 16px;
  box-shadow: 0 0 12px rgba(158, 141, 44, 0.4);
  pointer-events: none;
  z-index: -1;
}
.media-popup-content {
  background: rgba(22, 20, 25, 0.95);
  border: 2px solid #a279ff;
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(162, 121, 255, 0.6);
  width: 320px;
  max-width: 100%;
  padding: 100px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #ffe577;
  font-family: 'Georgia', serif;
  position: relative;
}
/* === Mobile: force recorder above chat popup (≤599px) === */
@media (max-width: 599px) {
  /* Put the recorder overlay at the very top plane */
  #mediaRecordingPopup.media-popup {
    position: fixed;
    z-index: 2147483647 !important;  /* above any chat overlay */
  }
    /* Focus veil becomes inert while recorder is open */
  body.media-open .focus-overlay,
  body.media-open .right-panel.focus-overlay,
  body.media-open .right-panel::before,
  body.media-open .right-panel::after {
    pointer-events: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}



.media-close {
  position: absolute;
  top: 8px;
  right: 12px;
  font-size: 24px;
  cursor: pointer;
  color: #ffe577;
  transition: color 0.3s ease;
}

.media-close:hover {
  color: #fff;
}

.media-popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-bottom: 12px;
}

.media-popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 14px;
  color: #f2e3a4;
  font-size: 16px;
  font-weight: bold;
}

.recording-timer {
  font-family: monospace;
  color: #fcb3ff;
  font-size: 14px;
  margin-left: auto;
  margin-right: 12px;
}

.media-actions {
  display: flex;
  justify-content: space-around;
  margin-top: 12px;
}

.ghost-action-btn {
  margin-top: 6px;
}

.ghost-action-btn:hover {
  background: #4b137c;
}
.ghost-label {
  font-weight: bold;
  font-size: 1.1rem;
  color: #ffe577;
}

#recordingTimer {
  font-size: 1rem;
  color: #ff8888;
}



#previewArea::before {
  content: "";
  position: absolute;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
  box-shadow: 0 0 40px rgba(162, 121, 255, 0.25);
  animation: previewRing 2.8s ease-in-out infinite;
  z-index: 0;
}

@keyframes previewRing {
  0% {
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0.2;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.3);
    opacity: 0.4;
  }
  100% {
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0.2;
  }
}

#videoPreview {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#audioVisualizer {
  width: 100%;
  height: 100%;
}

/* Audio visualizer default size (first open) */
#audioVisualizer{
  width: 100%;
  height: 180px;               /* tweak if you want taller by default */
  display: block;
  background:
    radial-gradient(1200px 600px at -20% -30%, rgba(162,121,255,.15), transparent 60%),
    radial-gradient(900px 600px at 120% 130%, rgba(238,221,144,.08), transparent 55%),
    linear-gradient(180deg, rgba(20,18,24,.95), rgba(22,20,26,.95));
  border: 1px solid rgba(206,178,255,.25);
  border-radius: 12px;
  box-shadow: 0 8px 26px rgba(10,8,14,.45), inset 0 0 20px rgba(162,121,255,.12);
}




.media-controls {
  display: flex;
  justify-content: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.media-controls button {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: radial-gradient(circle at center, #1b1a1f 0%, #0a090d 100%);
  border: 1.5px solid #a279ff;
  color: #ffe577;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 0 6px rgba(162, 121, 255, 0.25);
  transition: all 0.3s ease;
  position: relative;
}

.media-controls button:hover {
  background: #28242e;
  box-shadow: 0 0 10px #a279ff;
  transform: scale(1.08);
}

/* Active state pulse */
.media-controls button.active::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  box-shadow: 0 0 14px rgba(255, 229, 128, 0.3);
  animation: ghostBtnPulse 1.5s ease-in-out infinite;
}

@keyframes ghostBtnPulse {
  0% {
    transform: scale(1);
    opacity: 0.3;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.5;
  }
  100% {
    transform: scale(1);
    opacity: 0.3;
  }
}

.section-box input[type="file"] {
  width: 100%;
  margin-top: 6px;
  padding: 4px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid #cbb1ff;
  color: #cbb1ff;
  font-family: 'Georgia', serif;
}

.upload-buttons {
  margin-top: 8px;
  display: flex;
  gap: 10px;
  justify-content: center;
}

.upload-buttons .ghost-action-btn {
  background: linear-gradient(145deg, #1f1a2b, #2e2840);
  color: #f2e3a4;
  border: 1px solid #f2e3a4;
  border-radius: 6px;
  padding: 4px 10px;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease;
}

.upload-buttons .ghost-action-btn:hover {
  background-color: #3e3560;
  box-shadow: 0 0 6px #f2e3a4;
}

.fade-warning {
  margin-top: 10px;
  font-size: 0.75rem;
  color: #a279ff;
  font-style: italic;
}

.hidden {
  display: none !important;
}

.upload-input-group {
  display: flex;
  gap: 8px;
  justify-content: center;
  align-items: center;
  margin-bottom: 8px;
}

.upload-input-group input[type="file"] {
  background-color: transparent;
  color: #f2e3a4;
  border: 1px solid #f2e3a4;
  border-radius: 6px;
  padding: 3px;
}

.ghost-dropdown {
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid #f2e3a4;
  color: #f2e3a4;
  padding: 5px 8px;
  border-radius: 6px;
  font-family: 'Georgia', serif;
}

.ghost-dropdown {
  width: 100%;
  margin-top: 6px;
  background: rgba(255,255,255,0.05);
  border: 1px solid #f2e3a4;
  color: #f2e3a4;
  padding: 6px;
  border-radius: 6px;
  font-family: 'Georgia', serif;
}

.upload-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.upload-header-row .section-heading {
  margin: 0;
  font-size: 16px;
}

.header-dropdown {
  font-size: 14px;
  background-color: rgba(255, 255, 255, 0.05);
  color: #f2e3a4;
  border: 1px solid #f2e3a4;
  border-radius: 5px;
  padding: 4px 8px;
  font-family: 'Georgia', serif;
}

.small-dropdown {
  width: 160px; /* or whatever feels right visually */
  font-size: 14px;
}

.ghost-input {
  width: 100%;
  margin: 10px 0;
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid #ccc;
  font-family: 'Georgia', serif;
  background: #2b1a3d;
  color: #f2e6ff;
}

#ghostRecorderPopup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at center, #121116 0%, #0a090d 100%);
  border: 1px solid #a47eff;
  border-radius: 14px;
  box-shadow: 0 0 25px rgba(164, 126, 255, 0.3);
  padding: 20px;
  z-index: 1000;
  width: 320px;
  text-align: center;
  transition: all 0.3s ease;
}

.ghost-popup-glow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 14px;
  box-shadow: 0 0 50px rgba(164, 126, 255, 0.4);
  z-index: -1;
  opacity: 0.6;
  animation: ghostPulse 3s ease-in-out infinite;
}

@keyframes ghostPulse {
  0%, 100% {
    box-shadow: 0 0 15px rgba(164, 126, 255, 0.2);
  }
  50% {
    box-shadow: 0 0 35px rgba(164, 126, 255, 0.5);
  }
}

.ghost-audio-visual {
  position: relative;
  height: 80px;
  margin: 10px 0 20px;
  background: #161419;
  border: 1px solid #333;
  border-radius: 10px;
  overflow: hidden;
}

.ghost-waveform-line {
  width: 100%;
  height: 1px;
  background: linear-gradient(to right, #a279ff, #7e5bce, #a279ff);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.8;
}

.ghost-ripple {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(164, 126, 255, 0.2);
  transform: translate(-50%, -50%);
  animation: ripplePulse 2.5s infinite ease-out;
}

@keyframes ripplePulse {
  0% {
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0.6;
  }
  100% {
    transform: translate(-50%, -50%) scale(2.4);
    opacity: 0;
  }
}

.ghost-controls {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 10px;
}

.ghost-btn {
  width: 44px;
  height: 44px;
  font-size: 20px;
  border: none;
  border-radius: 12px;
  background: #0d0c0f;
  color: #ffe577;
  text-shadow: 0 0 6px #ffe577;
  box-shadow:
    0 0 6px rgba(255, 229, 100, 0.6),
    0 0 12px rgba(188, 143, 255, 0.4),
    inset 0 0 4px rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
  position: relative;
  z-index: 1;
}

.ghost-btn:hover {
  background: rgba(255, 255, 255, 0.05);
  transform: scale(1.1);
  box-shadow:
    0 0 12px #ffe577,
    0 0 24px #a279ff,
    inset 0 0 8px rgba(255, 255, 255, 0.2);
}

.ghost-btn.active {
  box-shadow: 0 0 12px 4px rgba(255, 255, 255, 0.3), 0 0 24px 6px rgba(162, 121, 255, 0.6);
  animation: glowPulse 1.8s ease-in-out infinite;
}

/* Individual button glows */
.ghost-glow-pink {
  background: radial-gradient(circle at center, #ff4fa6 0%, #2a0e2e 100%);
  color: white;
}

.ghost-glow-purple {
  background: radial-gradient(circle at center, #845fff 0%, #1b1033 100%);
  color: white;
}

.ghost-glow-grey {
  background: radial-gradient(circle at center, #6e6e6e 0%, #1a1a1a 100%);
  color: white;
}

.ghost-glow-gold {
  background: radial-gradient(circle at center, #ffe577 0%, #3b2f10 100%);
  color: #2b2000;
}

.ghost-glow-red {
  background: radial-gradient(circle at center, #ff6464 0%, #250a0a 100%);
  color: white;
}
.ghost-mist-btn {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background: radial-gradient(circle at center, #0f3d2e, #0b1c17);
  border: 2px solid #66ffcc;
  box-shadow: 0 0 8px #00ff99, 0 0 20px #00ff9955;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  color: #aaffdd;
  cursor: pointer;
  transition: all 0.3s ease;
}

.ghost-mist-btn:hover {
  box-shadow: 0 0 12px #33ffaa, 0 0 30px #66ffcc;
  transform: scale(1.08);
}

.ghost-mist-btn svg {
  width: 20px;
  height: 20px;
  fill: #aaffcc;
}
.ghost-search-input {
  width: 94%;
  height: 22px; /* Slightly shorter */
  padding: 1px 6px;
  margin-bottom: 6px;
  margin-top: 2px;
  border-radius: 6px;
  border: 1px solid #a279ff;
  background: radial-gradient(circle at center, #1a171f 0%, #0d0c0f 100%);
  color: #f2e3a4;
  font-family: 'Georgia', serif;
  font-size: 0.75rem;
  box-shadow: 0 0 3px rgba(162, 121, 255, 0.2);
  outline: none;
  transition: all 0.3s ease;
}

.ghost-search-input::placeholder {
  color: #a279ff;
  font-style: italic;
  font-size: 0.72rem;
}

.ghost-search-input:focus {
  box-shadow: 0 0 6px #a279ff, 0 0 10px #5efcb2;
  background: radial-gradient(circle at center, #2a2433 0%, #0e0d10 100%);
}
.ghost-notification-bar {
  position: absolute;
  top: 145px; /* adjust to align with Users box */
  left: 400px; /* adjust based on .left-panel width */
  width: 240px;
  background: #0f0e11;
  border: 1px solid #a279ff;
  border-radius: 10px;
  box-shadow: 0 0 12px rgba(162, 121, 255, 0.25);
  padding: 10px;
  font-family: 'Georgia', serif;
  z-index: 50;
}

.ghost-notification {
  background: rgba(162, 121, 255, 0.07);
  border-left: 3px solid #a279ff;
  padding: 6px 10px;
  margin-bottom: 8px;
  font-size: 0.85rem;
  color: #f2e3a4;
  border-radius: 6px;
  animation: fadeSlide 0.6s ease-out;
}

@keyframes fadeSlide {
  from {
    opacity: 0;
    transform: translateX(10px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
.notif-bell {
  margin-left: 10px;
  cursor: pointer;
  animation: pulseBell 2s infinite;
  color: #ff5555;
  font-size: 18px;
}

@keyframes pulseBell {
  0% { text-shadow: 0 0 4px #ff5555; }
  50% { text-shadow: 0 0 10px #ff8888; }
  100% { text-shadow: 0 0 4px #ff5555; }
}

.ghost-notification-bar {
  position: absolute;
  top: 160px;
  left: 380px;
  width: 240px;
  background: #0f0e11;
  border: 1px solid #a279ff;
  border-radius: 10px;
  box-shadow: 0 0 12px rgba(162, 121, 255, 0.25);
  padding: 10px;
  font-family: 'Georgia', serif;
  z-index: 100;
}

.ghost-notification {
  background: rgba(162, 121, 255, 0.07);
  border-left: 3px solid #a279ff;
  padding: 6px 10px;
  margin-bottom: 8px;
  font-size: 0.85rem;
  color: #f2e3a4;
  border-radius: 6px;
  animation: fadeSlide 0.5s ease-out;
}

@keyframes fadeSlide {
  from { opacity: 0; transform: translateX(10px); }
  to { opacity: 1; transform: translateX(0); }
}

.hidden {
  display: none !important;
}
.ghost-notification.glow-effect {
  box-shadow: 0 0 10px #8f6dff, 0 0 20px #c8b4ff;
  transition: box-shadow 0.3s ease-in-out, opacity 1s;
}

.ghost-notification.fade-out {
  opacity: 0;
  transform: translateY(-10px);
}

/* 🌫️ Spectral Modal Base */
.spectral-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(13, 12, 15, 0.9);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.spectral-modal.show {
  display: flex;
}

@keyframes pulseAura {
  0% { box-shadow: 0 0 25px rgba(255, 223, 105, 0.25); }
  50% { box-shadow: 0 0 40px rgba(255, 223, 105, 0.4); }
  100% { box-shadow: 0 0 25px rgba(255, 223, 105, 0.25); }
}


/* ✖ Close button */
.spectral-close {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 26px;
  cursor: pointer;
  color: #f2e3a4;
  text-shadow: 0 0 6px rgba(242, 227, 164, 0.5);
  transition: transform 0.2s ease, color 0.2s ease;
}

.spectral-close:hover {
  transform: scale(1.2);
  color: #ffe48a;
  text-shadow: 0 0 10px rgba(255, 230, 170, 0.8);
}

.spectral-intro-box {
  padding: 10px;
  background: rgba(20, 15, 35, 0.8);
  border-radius: 12px;
  box-shadow: 0 0 8px #7f5aff;
}

.spectral-title {
  font-size: 1.5rem;
  color: #cfc2ff;
  text-shadow: 0 0 4px #a88bff;
  margin-bottom: 0;
}

.spectral-subtitle {
  font-size: 1.1rem;
  color: #ffddaa;
  margin: 4px 0 20px;
}

.spectral-label {
  display: block;
  margin-bottom: 6px;
  color: #ffe4b8;
  font-weight: 500;
}

.spectral-input {
  width: 80%;
  padding: 10px;
  font-size: 1rem;
  background: #1e182a;
  border: 1px solid #6d4eff;
  color: #f4eaff;
  border-radius: 8px;
  outline: none;
  margin-bottom: 12px;
}

.spectral-input::placeholder {
  color: #8c78b6;
}

.spectral-btn {
  padding: 8px 16px;
  font-size: 0.95rem;
  background: #7a64ff;
  color: white;
  border: none;
  border-radius: 6px;
  box-shadow: 0 0 6px #a77aff;
  cursor: pointer;
  transition: background 0.2s ease;
}

.spectral-btn:hover {
  background: #9374ff;
}

.spectral-hint {
  margin-top: 15px;
  font-size: 0.85rem;
  color: #9df2e6;
  font-style: italic;
}

.spectral-lore-box {
  position: relative;
  background: radial-gradient(circle at center, rgba(77, 60, 109, 0.45), transparent 80%);
  border-radius: 12px;
  padding: 40px 20px;
  margin-bottom: 30px;
  backdrop-filter: blur(4px);
  box-shadow: 0 0 20px rgba(174, 152, 255, 0.15);
}

.spectral-lore-text {
  text-align: center;
  color: #d7ccff;
  font-family: 'Georgia', serif;
}

.spectral-lore-text h3 {
  font-size: 1.3rem;
  color: #f2e3a4;
  margin-bottom: 10px;
}

.spectral-lore-text p {
  font-size: 0.95rem;
  line-height: 1.5;
}

/* 🟡 Riddle Title */
#riddleTitle, .spectral-content h2 {
  color: gold;
  font-size: 1.5em;
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
  margin-bottom: 15px;
}

#riddleSection {
  display: none;
  opacity: 0;
  transition: opacity 2s ease;
  margin-top: 20px;
  background: #0d0c14;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 0 20px rgba(185, 142, 255, 0.3);
}

.riddle-container {
  background: #120c1d;
  border: 2px solid #f2e3a4;
  padding: 25px;
  border-radius: 12px;
  box-shadow: 0 0 30px rgba(144, 99, 255, 0.4);
  text-align: center;
  margin-top: 30px;
}

.riddle-title {
  font-family: 'Georgia', serif;
  font-size: 1.4rem;
  color: #f7f0d4;
  margin-bottom: 10px;
}

.riddle-subtext {
  font-size: 0.95rem;
  color: #cfc3f5;
  margin-bottom: 20px;
}

.riddle-input-group {
  margin: 10px auto;
  display: flex;
  justify-content: center;
  gap: 8px;
}

.riddle-input-group input {
  padding: 8px;
  border-radius: 6px;
  border: none;
  background: #1c1525;
  color: #f0f0f0;
}

.riddle-input-group button {
  padding: 8px 12px;
  border: none;
  background: #b48aff;
  color: #1c0e2a;
  border-radius: 6px;
  font-weight: bold;
  cursor: pointer;
}

.riddle-status, .riddle-feedback {
  margin-top: 10px;
  color: #90ffba;
  font-style: italic;
}

.riddle-timer {
  margin-top: 10px;
  font-style: italic;
  color: #f3fcb8;
  text-align: center;
  opacity: 0.85;
}

/* ✍️ Inputs and Buttons */
.spectral-content input[type="text"] {
  width: 80%;
  padding: 10px;
  margin: 8px auto;
  border: 1px solid #cab15c;
  border-radius: 6px;
  background: #100c14;
  color: #f2e3a4;
  font-family: 'Georgia', serif;
}

.spectral-content button {
  margin-top: 8px;
  padding: 8px 16px;
  background: #cab15c;
  border: none;
  border-radius: 6px;
  color: #1a1622;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.3s ease;
}

.spectral-content button:hover {
  background: #ffe28a;
}

/* ✅ Feedback message after answer */
#answerStatus, .status-msg {
  margin-top: 10px;
  font-style: italic;
  color: #8ee4af;
  font-size: 0.9em;
}

/* 🔮 Fade Animation */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Optional: Pointing triangle from ghost bar */
.ghost-notification-bar::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 30px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #9b79ff transparent;
}

#etherealKeySection {
  background: rgba(11, 4, 19, 0.8);
  border: 3px solid #69540d;
  padding: 20px;
  border-radius: 12px;
  width: 400px;
  margin: 0 auto;
  text-align: center;
  box-shadow: 0 0 18px #ffe79a;
  font-family: 'Georgia', serif;
  margin-top: 40px;
  animation: fadeIn 1.5s ease-in;
}

#etherealKeySection label {
  display: block;
  font-size: 1.1em;
  color: #ffdd44;
  margin-bottom: 10px;
  font-weight: bold;
}

#etherealKeySection input {
  padding: 8px 12px;
  width: 80%;
  border: 1px solid #999;
  border-radius: 6px;
  margin-bottom: 10px;
  background: #1d1a29;
  color: #fff;
  outline: none;
}

#etherealKeySection input::placeholder {
  color: #a6a6a6;
  font-style: italic;
}

#etherealKeySection button {
  background: linear-gradient(to right, #ffe161, #f7b733);
  border: none;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  color: #2b1d03;
  font-weight: bold;
  transition: transform 0.2s ease;
  margin-top: 8px;
}

#etherealKeySection button:hover {
  transform: scale(1.05);
  background: linear-gradient(to right, #f7b733, #ffe161);
}

.glow-msg {
  margin-top: 12px;
  color: #b7ffc5;
  font-style: italic;
  font-size: 0.95em;
  text-shadow: 0 0 4px #9effb3;
  animation: fadeIn 1.5s ease-in;
}

#welcomeMessage {
  color: #8ee4af;
  text-align: center;
  margin-top: 20px;
  font-weight: bold;
  font-size: 1.1em;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}
/* 🔮 SPECTRAL PORTAL STYLES */

/* Main clickable spectral box */
.spectral-box {
  cursor: pointer;
  border: 2px solid #cab15c;
  border-radius: 12px;
  padding: 12px;
  text-align: center;
  background-color: #0f0f14;
  color: #f6e27f;
  font-weight: bold;
  box-shadow: 0 0 5px 2px rgba(162, 121, 255, 0.3);
  transition: box-shadow 0.4s ease, transform 0.3s ease;
}

.spectral-box:hover {
  transform: scale(1.02);
  box-shadow: 0 0 5px 3px #a279ff, 0 0 12px rgba(162, 121, 255, 0.6);
}

/* Fade-out modal effect */
.spectral-modal.fade-out {
  opacity: 0;
  transition: opacity 1s ease;
}

/* "Enter Realm" CTA button */
.enter-realm-button {
  background: linear-gradient(145deg, #bfa7ff, #e6ccff);
  color: #f0e6ff !important; /* lighter purple/white for better contrast */
  font-family: 'Cinzel Decorative', serif;
  font-weight: bold;
  font-size: 16px;
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  text-shadow: 0 0 8px #d8c3ff, 0 0 18px #c2a9ff; /* stronger purple glow */
  box-shadow: 0 0 20px #c2a9ff;
  letter-spacing: 1.2px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.enter-realm-button:hover {
  background: linear-gradient(145deg, #c3aaff, #fff0e0);
  color: #fff8d4 !important;
  text-shadow: 0 0 10px #fff7b3, 0 0 20px #ffe477;
  box-shadow: 0 0 28px #ffe477;
}

/* Spectral footer links */
.footer-links a {
  color: #f2e3a4;
  text-decoration: none;
}

/* Trigger button inside portal panel */
#spectralTrigger {
  width: 94%;
  margin: 10px auto 0;
  padding: 8px 10px;
  background: radial-gradient(circle at center, #1a171f 0%, #0d0c0f 100%);
  color: #f2e3a4;
  font-family: 'Georgia', serif;
  font-size: 0.9rem;
  font-weight: bold;
  border: 1px solid #a279ff;
  border-radius: 6px;
  text-align: center;
  cursor: pointer;
  box-shadow: 0 0 3px rgba(162, 121, 255, 0.2);
  transition: all 0.3s ease;
}

#spectralTrigger:hover {
  box-shadow: 0 0 20px rgba(202, 174, 255, 0.6);
  background: radial-gradient(circle at center, #211b2c 0%, #0d0c0f 100%);
}

/* Spectral header-style golden gradient button */
.spectral-button {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  font-family: 'Georgia', serif;
  font-size: 1.05rem;
  font-weight: bold;
  background: radial-gradient(circle at center, #0f0e12, #1a171f);
  background-image: linear-gradient(
    135deg,
    #f5e796 10%,
    #e0c165 30%,
    #c79b30 50%,
    #f2e3a4 80%
  );
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow:
    0 1px 0 #6a4d17,
    0 2px 4px rgba(255, 220, 130, 0.2);
  border: 2px solid rgba(242, 227, 164, 0.4);
  border-radius: 10px;
  transition: all 0.3s ease;
  cursor: pointer;
  line-height: 1;
}

.spectral-button:hover {
  transform: scale(1.03);
  text-shadow:
    0 1px 0 #d1a31d,
    0 2px 4px rgba(0, 0, 0, 0.4),
    0 0 12px rgba(255, 220, 130, 0.7);
}

/* Ensure entire section behaves as a pointer zone */
.spectral-realm-box,
.spectral-realm-box * {
  cursor: pointer;
}



/* ------- Chrome mobile only (≤599px) ------- */
/* Blink-only hack: (-webkit-min-device-pixel-ratio:0) targets Chrome/Edge/Opera (not Firefox) */
@media screen and (max-width: 599px) and (-webkit-min-device-pixel-ratio:0) {

  /* Stop Chrome text auto-boosting in this area */
  .spectral-modal,
  .spectral-content,
  .spectral-lore-box,
  #riddleSection,
  .riddle-container {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  /* Use dynamic viewport to avoid URL-bar 100vh bugs */
  .spectral-modal {
    height: 100dvh;
    align-items: flex-start;
    padding: calc(env(safe-area-inset-top, 0px) + px) 12px 16px;
  }

  /* Card spacing / width */
  .spectral-intro-box,
  .spectral-lore-box,
  #riddleSection,
  .riddle-container {
    max-width: 96vw;
    margin: 10px auto;
    padding: 16px;
  }

  /* Typography scales */
  .spectral-title {               /* “The Spectral Realm” */
    font-size: clamp(18px, 6vw, 24px);
    line-height: 1.2;
  }
  .spectral-subtitle {
    font-size: clamp(14px, 4.6vw, 18px);
    line-height: 1.35;
  }
  .spectral-lore-text h3,
  #riddleTitle,
  .spectral-content h2 {
    font-size: clamp(16px, 5.4vw, 22px);
    line-height: 1.25;
  }
  .spectral-lore-text p,
  .riddle-subtext,
  .riddle-status,
  .riddle-feedback,
  .riddle-timer {
    font-size: clamp(13px, 4.2vw, 16px);
    line-height: 1.45;
  }

  /* Inputs / buttons */
  .spectral-input,
  .spectral-content input[type="text"],
  .riddle-input-group input {
    width: 100%;
    font-size: clamp(14px, 4.2vw, 16px);
  }
  .spectral-btn,
  .spectral-content button,
  .riddle-input-group button {
    font-size: clamp(13px, 3.8vw, 15px);
    padding: 10px 14px;
  }

  /* Close button—tuck tighter on mobile */
  .spectral-close {
    top: 12px;
    right: 14px;
    font-size: 22px;
    z-index: 2;
  }
}


.ghost-bar-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 4px;
  padding: 4px 2px;
  flex-wrap: wrap;
  max-width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.av-controls, .global-glyph-bar {
  display: flex;
  gap: 4px;
  flex-wrap: nowrap;
  flex-shrink: 1;
  min-width: 0;
}

.ghost-av-btn {
  font-size: 14px;
  padding: 2px 5px;
  max-width: 28px;
  flex-shrink: 0;
}

.glyph {
  font-size: 14px;
  padding: 2px;
  max-width: 24px;
  text-shadow: 0 0 4px rgba(240, 240, 255, 0.4); /* softer glow */
  transition: transform 0.2s ease;
  cursor: pointer;
}

.glyph:hover {
  transform: scale(1.1);
  text-shadow: 0 0 6px rgba(200, 200, 255, 0.9); /* glow on hover */
}

.glyph {
  font-size: 14px;
  padding: 2px;
  max-width: 24px;
  text-shadow: 0 0 2px rgba(240, 240, 255, 0.2);
  transition: transform 0.2s ease;
  cursor: pointer;
}

/* ⛔ Remove the gold text tooltip by overriding the title attribute */
.glyph::after {
  content: none !important;
}

.glyph::after {
  content: attr(title);
  position: absolute;
  background: #111;
  color: #f1f1f1;
  font-size: 10px;
  padding: 3px 6px;
  border-radius: 4px;
  top: -28px;
  opacity: 0;
  transition: opacity 0.2s ease;
  white-space: nowrap;
  pointer-events: none;
  z-index: 10;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.2);
}

.glyph {
  font-size: 14px;
  padding: 2px;
  max-width: 24px;
  flex-shrink: 0;
  text-shadow: 0 0 2px rgba(240, 240, 255, 0.2); /* 🔹 Minimal base glow */
  transition: transform 0.2s ease, text-shadow 0.2s ease;
  cursor: pointer;
}

.glyph:hover {
  transform: scale(1.1);
  text-shadow: 0 0 4px rgba(180, 180, 255, 0.5); /* 🔹 Subtle hover glow */
}

.recording-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 14px;
  background: transparent;
  color: #f2e3a4;
  font-weight: bold;
  font-size: 16px;
}

.recording-timer {
  font-family: monospace;
  color: #fcb3ff;
  font-size: 14px;
}

.recording-actions {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  gap: 12px;
}

.recording-actions button {
  background: #1e1e1e;
  color: #fff0f0;
  border: 1px solid #fff;
  border-radius: 10px;
  padding: 6px 12px;
  font-weight: bold;
  cursor: pointer;
  transition: 0.3s ease;
}
.recording-actions button:hover {
  background: #4d0a52;
}

.ghost-modal {
  position: relative;
  background: none;
  box-shadow: none;
  margin-top: 12px;
}

.ghost-modal.hidden {
  display: none;
}

.ghost-modal-content {
  background-color: #1c1724;
  border: 1px solid #a98cff;
  border-radius: 10px;
  padding: 12px;
  box-shadow: 0 0 8px #b18cff99;
  text-align: center;
  animation: fadeIn 0.3s ease-in-out;
}


.ghost-modal-content input {
  width: 80%;
  padding: 8px 12px;
  margin: 10px 0;
  border-radius: 6px;
  border: 1px solid #f2e3a4;
  background: #2e2640;
  color: #f2e3a4;
}

.ghost-modal-close {
  float: right;
  cursor: pointer;
  font-size: 22px;
  color: rgb(212, 202, 131); /* base gold */
  transition: color 0.25s ease, text-shadow 0.25s ease;
}

.ghost-modal-close:hover {
  color: #bead74; /* brighter gold on hover */
  text-shadow: 0 0 6px rgba(206, 187, 127, 0.7),
               0 0 12px rgba(199, 183, 137, 0.5);
}

.ghost-modal-close:active {
  color: #c5b471; /* softer gold when pressed */
  text-shadow: 0 0 4px rgba(218, 196, 127, 0.6);
  transform: scale(0.95); /* tiny press feedback */
}


.hidden {
  display: none !important;
}

@keyframes fade-in {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: scale(1); }
}

.ghost-fallback-msg {
  position: fixed;
  top: 30%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(25, 20, 35, 0.95);
  border: 2px solid #bb88ff;
  padding: 25px 35px;
  color: #f2e3a4;
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(185, 142, 255, 0.6);
  z-index: 9999;
  text-align: center;
}

.ghost-fallback-msg h3 {
  font-size: 1.3rem;
  margin-bottom: 10px;
  color: #ffccff;
}

.ephemeral-message {
  opacity: 0.85;
  font-style: italic;
  color: #ccc;
  padding-left: 10px;
  font-size: 0.85em;
  animation: fadeDisappear 6s forwards;
}

@keyframes fadeDisappear {
  0% { opacity: 1; }
  80% { opacity: 0.5; }
  100% { opacity: 0; display: none; }
}

.chat-message.file-attached {
  background-color: #1a1a22;
  border: 1px solid #6b5ca5;
  margin: 8px 0;
  padding: 10px;
  border-radius: 8px;
}

.chat-message.file-attached p.file-message-text {
  margin-top: 6px;
  font-style: italic;
  color: #c2aaf3;
}

.ghost-av-btn {
  background: none;
  border: none;
  font-size: 15px;
  cursor: pointer;
  color: #f2e3a4;
  text-shadow: 0 0 2px #bb88ff;
  transition: transform 0.2s ease;
}
.ghost-av-btn:hover {
  transform: scale(1.2);
  filter: brightness(1.3);
}

.ghost-media-messages {
  padding: 10px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.ghost-toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(185, 142, 255, 0.9);
  color: #0d0c0f;
  padding: 10px 20px;
  border-radius: 12px;
  font-weight: bold;
  box-shadow: 0 0 12px #b18aff;
  z-index: 9999;
  transition: opacity 1s ease;
}

.ghost-toast.fade-out {
  opacity: 0;
}

#ghostChatMessages {
  height: 240px;
  overflow-y: auto;
  padding-right: 8px;
  display: flex;
  flex-direction: column;

  /* ❌ Remove or override this */
  /* scroll-behavior: smooth; */

  /* ✅ Force instant scroll */
  scroll-behavior: auto !important;
}

#ghostChatMessages { min-height: 0; }

/* 🎧 Audio player inside bubble */
.chat-message audio {
  display: block;
  width: 100%;
  margin-top: 6px;
  filter: drop-shadow(0 0 3px #9f8aff);
  border-radius: 6px;
}

.chat-message video {
  display: block;
  width: 100%;
  max-width: 100%;
  margin-top: 6px;
  border-radius: 8px;
  background-color: #000;
  filter: drop-shadow(0 0 3px #9f8aff);
}

video::-webkit-media-controls-panel {
  background-color: rgba(0, 0, 0, 0.6);
}

/* 👻 Whisper note (optional) */
.ghost-note {
  font-style: italic;
  color: #cfaeff;
  margin-top: 4px;
  margin-bottom: 4px;
  font-size: 13px;
}

.spectral-pillars {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 30px;
  flex-wrap: wrap;
}


.spectral-column {
  background-color: rgba(160, 120, 255, 0.1);
  border: 1px solid #a78bfa;
  padding: 10px 16px;
  border-radius: 8px;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
  position: relative;
  transition: all 0.3s ease;
}



.riddle-months {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
  visibility: hidden;
  transition: opacity 0.5s ease;
  backdrop-filter: blur(4px);
}

.riddle-month {
  background-color: rgba(180, 140, 255, 0.1);
  border: 1px solid #a78bfa;
  padding: 10px 15px;
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
  transition: background 0.3s;
  position: relative;
}

.riddle-month:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  top: 120%;
  left: 50%;
  transform: translateX(-50%);
  background: #111;
  padding: 10px;
  border-radius: 6px;
  color: #f0e6ff;
  white-space: pre-line;
  width: max-content;
  max-width: 220px;
  font-size: 0.9rem;
  z-index: 100;
}

/* 🏛️ Spectral Pillars Container */
#spectralPillarsContainer {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 20px;
  border-radius: 14px;
  width: fit-content;
  max-width: 90%;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease-in-out;
}

/* 👻 Background Blur Overlay When Visible */

/* 🌟 Make Pillars Visible */
#spectralPillarsContainer.spectral-pillar-visible {
  opacity: 1;
  pointer-events: auto;
}

/* 🪜 Individual Roman Pillar */
.spectral-column {
  width: 26px;
  height: 72px;
  font-size: 0.85rem;
  font-family: 'Cinzel', serif;
  color: #e7dcff;
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.04) 5%, rgba(30, 10, 40, 0.25) 80%);
  border: 2px solid rgba(167, 139, 250, 0.4);
  box-shadow: 0 0 8px rgba(167, 139, 250, 0.08);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 6px;
  position: relative;
  transition: all 0.3s ease;
}

/* ✨ Active Pillar (solved month) */
.spectral-column.active {
  background: linear-gradient(180deg, #a56eff, #6b3eff);
  box-shadow: 0 0 12px #c084fc, inset 0 0 6px #ffffff33;
  border: 1px solid #d9b4ff;
  color: #ffffff;
  font-weight: bold;
}

/* 👁 Enhanced Tooltip Style */
.spectral-column:hover::after {
  content: attr(data-tooltip);
  white-space: pre-line;
  background: rgba(20, 20, 30, 0.95);
  color: #e0e0ff;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.9rem;
  position: absolute;
  top: 130%;
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: 240px;
  box-shadow: 0 0 10px #a56eff;
  z-index: 9999;
  font-family: 'Cinzel', serif;
}

/* 🔮 Message on all 12 complete */


/* 👻 Fade-in animation */
@keyframes fade-in {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

/* 👻 Fullscreen Background Blur Overlay */
#spectralBlurOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(10, 0, 20, 0.25);
  backdrop-filter: blur(8px) brightness(0.85);
  z-index: 99;
  transition: opacity 0.3s ease;
}

#spectralBlurOverlay.hidden {
  display: none;
  opacity: 0;
  pointer-events: none;
}

/* ✨ Pillar entrance shimmer */
@keyframes shimmer-fade-in {
  0% {
    opacity: 0;
    transform: scale(0.95) rotateX(-10deg);
    filter: brightness(0.5) blur(1px);
  }
  50% {
    opacity: 1;
    transform: scale(1.02);
    filter: brightness(1.2);
  }
  100% {
    transform: scale(1) rotateX(0);
    filter: none;
  }
}

.spectral-column.neutral {
  opacity: 0.3;
  filter: grayscale(0.7);
  pointer-events: none;
}

.spectral-column.attempted {
  background: rgba(90, 0, 0, 0.25);
  border-color: #d66;
  color: #ffbbbb;
  box-shadow: 0 0 6px rgba(255, 80, 80, 0.3);
}

.spectral-column {
  position: relative; /* Needed for tooltip positioning */
  overflow: visible;
  
}

.pillar-success {
  border: 1px solid #52ffcb;
  box-shadow:
    0 0 8px #52ffcb,
    0 0 16px rgba(82, 255, 203, 0.4),
    inset 0 0 6px rgba(82, 255, 203, 0.2);
  background: radial-gradient(circle at center, rgba(20, 50, 40, 0.2), transparent);
  color: #b9ffe5;
  transition: all 0.4s ease-in-out;
}

@keyframes pulse-glow {
  0% {
    text-shadow: 0 0 2px #d5bfff;
    box-shadow: 0 0 6px rgba(160, 120, 255, 0.2);
  }
  100% {
    text-shadow: 0 0 8px #e3ccff;
    box-shadow: 0 0 12px rgba(180, 140, 255, 0.4);
  }
}



.pillar-failed {
  border: 1px solid #ff4c4c;
  box-shadow:
    0 0 8px #ff4c4c,
    0 0 16px rgba(255, 76, 76, 0.3),
    inset 0 0 6px rgba(255, 30, 30, 0.2);
  background: radial-gradient(circle at center, rgba(50, 0, 0, 0.15), transparent);
  color: #ffcccc;
  transition: all 0.4s ease-in-out;
}

@keyframes cursed-flicker {
  0% {
    box-shadow: 0 0 6px #ff4c4c;
  }
  100% {
    box-shadow: 0 0 14px #ff1f1f, 0 0 28px rgba(255, 20, 20, 0.4);
  }
}

.pillar-failed {
  animation: cursed-flicker 1.8s ease-in-out infinite alternate;
}

.spectral-column.pillar-pending {
  border: 2px solid rgba(167, 139, 250, 0.35);
  background-color: rgba(50, 30, 80, 0.08);
  box-shadow: 0 0 4px rgba(167, 139, 250, 0.15);
}

#spectralPillarsOuter {
  border: 2px solid rgba(167, 139, 250, 0.25);
  border-radius: 12px;
  padding: 12px 20px;
  display: inline-block;
  margin-top: 20px;
  background-color: rgba(50, 20, 80, 0.1);
  box-shadow: 0 0 12px rgba(167, 139, 250, 0.2);
}

.spectral-column span {
  text-shadow: 0 0 4px rgba(255, 255, 255, 0.1), 0 0 8px rgba(167, 139, 250, 0.2);
}

.spectral-column::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  right: 2px;
  bottom: 2px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.035) 20%, transparent 90%);
  border-radius: 4px;
  pointer-events: none;
  filter: blur(1.5px);
}

#loreUnlockModal.spectral-modal {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  z-index: 9999;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(15, 5, 30, 0.85);
  backdrop-filter: blur(4px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.8s ease;
}

#loreUnlockModal.spectral-modal.spectral-pillar-visible {
  opacity: 1;
  pointer-events: auto;
}


@keyframes pulse-glow {
  0%   { box-shadow: 0 0 8px rgba(200, 180, 255, 0.2); }
  100% { box-shadow: 0 0 22px rgba(200, 180, 255, 0.35); }
}

.spectral-close {
  position: absolute;
  top: 14px;
  right: 18px;
  font-size: 1.6rem;
  color: #fff;
  cursor: pointer;
}

.glow-180 {
  color: #affff2;
  font-weight: bold;
  text-shadow: 0 0 4px rgba(0, 255, 180, 0.5), 0 0 8px rgba(0, 255, 180, 0.3);
}

.enter-ethereal-btn {
  margin-top: 16px;
  padding: 10px 20px;
  background: linear-gradient(to right, #6a5acd, #483d8b);
  border: none;
  border-radius: 8px;
  font-family: 'Cinzel', serif;
  font-size: 1rem;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(160, 130, 255, 0.3);
  transition: background 0.3s ease, transform 0.2s ease;
}

.enter-ethereal-btn:hover {
  background: linear-gradient(to right, #7a68f2, #574bb2);
  transform: scale(1.05);
}

.lore-message {
  font-family: 'Cinzel', serif;
  font-size: 1rem;
  color: #e9e4ff;
  padding: 24px;
  border-radius: 12px;
  background: radial-gradient(circle at center, rgba(30, 10, 40, 0.6), rgba(10, 5, 20, 0.3));
  box-shadow: 0 0 12px rgba(140, 110, 255, 0.3);
  text-align: center;
  line-height: 1.8;
  animation: lore-fade-in 1.5s ease-out;
}

@keyframes lore-fade-in {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.enter-ethereal-btn {
  margin-top: 20px;
  padding: 10px 22px;
  border: none;
  border-radius: 8px;
  background: linear-gradient(to right, #6a5acd, #8f7eff);
  color: #fff;
  font-family: 'Cinzel', serif;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(150, 120, 255, 0.4);
  transition: background 0.3s ease, transform 0.2s ease;
}

.enter-ethereal-btn:hover {
  background: linear-gradient(to right, #7c68f2, #b59fff);
  transform: scale(1.05);
}


.spectral-box {
  position: relative;
  overflow: hidden;
}

.fog-overlay {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(120, 255, 244, 0.04) 20%, transparent 80%);
  opacity: 0.3;
  animation: swirlFog 40s linear infinite;
  pointer-events: none;
  z-index: 0;
}

.spectral-box h3 {
  position: relative;
  z-index: 2;
}

@keyframes swirlFog {
  0% {
    transform: rotate(0deg) scale(1);
  }
  100% {
    transform: rotate(360deg) scale(1.2);
  }
}

.spectral-box:hover {
  box-shadow: 0 0 12px rgba(200, 150, 255, 0.25);
  background: rgba(15, 44, 55, 0.6);
}

.spectral-box h3 {
  font-family: 'Cinzel', serif;
  font-size: 1.2rem;
  color: #c3fff7;
  text-shadow: 0 0 4px rgba(120, 255, 244, 0.3);
  letter-spacing: 0.5px;
  margin: 0;
}

#spectralTrigger {
  animation: glow-flicker 5s infinite alternate;
}

/* 🧭 Dock bar layout */
#ghostDockBar {
  display: flex;
  flex-direction: row; /* This makes the children align horizontally */
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  overflow-x: auto;
}

/* ➕ Button slot style */
.more-button {
  font-size: 8px;
  font-weight: bold;
  color: #ffe577;
}

.dock-dropdown {
  position: absolute;
  bottom: 50px;
  left: 20px;
  background: #121212;
  border: 1px solid #cab15c;
  border-radius: 6px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 220px; /* around 5 avatars tall */
  overflow-y: auto;
  box-shadow: 0 0 12px rgba(255, 229, 119, 0.2);
  z-index: 9999;
}

.ghost-dock-slot:hover {
  box-shadow: 0 0 2px 1px #ffcc70;
  transform: scale(1.05);
}

.ghost-dock-dropdown {
  position: absolute;
  width: 48px;
  max-height: 170px;
  overflow-y: auto;
  overflow-x: hidden;
  background: #1c1921;
  border: 1px solid #745cca;
  border-radius: 8px;
  padding: 6px;
  box-shadow: 0 0 12px rgba(255, 222, 120, 0.3);
  z-index: 9999;
  scrollbar-width: thin;              /* Firefox */
  scrollbar-color: #cab15c transparent; /* Firefox */
}

/* Scrollbar styling for WebKit (Chrome, Edge, Safari) */
.ghost-dock-dropdown::-webkit-scrollbar {
  width: 6px;
}

.ghost-dock-dropdown::-webkit-scrollbar-track {
  background: transparent;
}

.ghost-dock-dropdown::-webkit-scrollbar-thumb {
  background-color: #cab15c;
  border-radius: 4px;
  box-shadow: 0 0 6px rgba(202, 177, 92, 0.5);
}

#minimizeChatBtn {
  cursor: pointer;
}

/* Style for each user row */
.ghost-user-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  margin-bottom: 6px;
  background-color: rgba(255, 255, 255, 0.02);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.ghost-user-item:hover {
  background-color: rgba(255, 255, 255, 0.06);
}

/* Avatar style */
.inline-avatar {
  width: 24px;
  height: 24px;
  border-radius: 5px;
  object-fit: cover;
  border: 1px solid #aaa;
  background-color: #111;
  box-shadow: 0 0 3px rgba(168, 134, 255, 0.4);
}

/* Status dot */
.status {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 4px;
  margin-left: 2px;
}

/* Status colors */
.status.online {
  background-color: #00ff9a;
  box-shadow: 0 0 6px #00ff9a;
}

.status.offline {
  background-color: #ff3c3c;
  box-shadow: 0 0 6px #ff3c3c;
}

.status.wall-poster {
  background-color: #3caeff;
  box-shadow: 0 0 6px #3caeff;
}

/* Username styling */
.ghost-user-name {
  color: #f5e9d7;
  font-size: 14px;
  font-weight: 500;
}

/* === VISIBILITY DURATION BOX === */
#visibilityDurationBar.upload-duration {
  background: #1a141e;
  border: 1px solid #cab15c;
  border-radius: 10px;
  padding: 12px 16px;
  margin-top: 12px;
  max-width: 340px;
  box-shadow: 0 0 14px rgba(255, 255, 255, 0.05);
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: fadeInBox 0.4s ease-out;
}

/* === Header Row: Label + Close ✖ === */
.duration-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ghost-label {
  font-family: 'Cinzel', serif;
  font-size: 14px;
  color: #ffe577;
}

.close-duration-btn {
  font-size: 16px;
  cursor: pointer;
  color: #d4c6a8;
  transition: color 0.2s ease, text-shadow 0.2s ease;
}

.close-duration-btn:hover {
  color: #fff4d2;
  text-shadow: 0 0 6px #cab15c;
}

/* === Select + Confirm Row === */
.upload-duration-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* === CUSTOM DROPDOWN BASE === */ 
.custom-dropdown {
  position: relative;
  font-family: 'Cinzel', serif;
  width: 180px;
  z-index: 10;
}

/* Selected option */
.custom-dropdown .selected-option {
  background: #2a2234;
  color: #f5eedd;
  padding: 6px 12px;
  border: 1px solid #cab15c;
  border-radius: 6px;
  cursor: pointer;
  box-shadow:
    inset 0 0 2px #cab15c88,
    0 0 6px rgba(202, 177, 92, 0.25);
}

/* Options container (now floats, no scroll issue) */
.custom-dropdown .dropdown-options {
  position: absolute;
  top: calc(100% + 4px); /* Drop slightly below selected-option */
  left: 0;
  right: 0;
  background: #1e1a24;
  border: 1px solid #cab15c;
  border-radius: 6px;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.05);
  z-index: 20;
  max-height: 220px; /* Just in case you add many options later */
  overflow-y: auto;
  overflow-x: hidden;
}

/* Individual option */
.custom-dropdown .dropdown-options div {
  padding: 5px 10px;
  font-size: 13px; /* 👈 smaller text */
  color: #f0e6c8;
  cursor: pointer;
  transition: background 0.2s ease;
  line-height: 1.2;
}

.custom-dropdown .selected-option {
  font-size: 13px;
}

/* Hide dropdown */
.hidden {
  display: none;
}


/* === SHARED BUTTON + SELECT STYLE === */
.ghost-select,
.ghost-action-btn {
  background: #2a2234;
  color: #f5eedd;
  border: 1px solid #cab15c;
  border-radius: 6px;
  padding: 6px 14px;
  font-family: 'Cinzel', serif;
  font-size: 14px;
  cursor: pointer;
  box-shadow:
    inset 0 0 2px #cab15c88,
    0 0 6px rgba(202, 177, 92, 0.25);
  transition: all 0.25s ease;
}

/* Hover state */
.ghost-select:hover,
.ghost-action-btn:hover {
  background: #352a41;
  color: #fffbe1;
  border-color: #ffe577;
  box-shadow:
    inset 0 0 2px #ffe577aa,
    0 0 8px #ffe57780;
}

/* === FADE ANIMATION === */
@keyframes fadeInBox {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* === MEDIA INSIDE TILE === */
.wall-tile img,
.wall-tile video {
  width: 100%;
  max-height: 240px;          /* 👈 prevents vertical overflow */
  object-fit: cover;          /* 👈 keeps video nicely cropped */
  border-radius: 8px;
  display: block;
  border: 1px solid #cab15c;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.08);
}


/* Default for desktops and large screens */
.wall-container {
  column-count: 4;
  column-gap: 20px;
  padding: 24px;
  min-height: 100vh;
  height: auto;
  overflow-y: auto;
  overflow-x: hidden;
  /* Remove or comment out this line to fix the error */
  /* background: url('fog-layer.png') center center fixed; */
  /* background-size: cover; */
  box-sizing: border-box;
  scroll-behavior: smooth;
}

/* Tablets (between 600px and 1024px) */
@media (max-width: 1024px) {
  .wall-container {
    column-count: 2;
    padding: 16px;
  }
}

/* Mobile phones (below 600px) */
@media (max-width: 600px) {
  .wall-container {
    column-count: 1;
    padding: 12px;
  }
}

/* === WALL TILE === */

/* Wall tile styling */
.wall-tile {
  background: linear-gradient(145deg, rgba(25, 21, 18, 0.88), rgba(12, 10, 8, 0.88));
  border: 1.5px solid rgba(236, 213, 149, 0.15);
  border-radius: 12px;
  box-shadow:
    0 0 6px rgba(236, 213, 149, 0.25),
    0 0 12px rgba(236, 213, 149, 0.12),
    inset 0 0 2px rgba(255, 255, 255, 0.05);
  transition: transform 0.3s ease, filter 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  overflow: hidden;
  padding: 12px 12px 8px; /* padding for username + glyphs */
  margin: 0;

  display: flex;
  flex-direction: column; /* stack children vertically */
  justify-content: flex-start;
  gap: 8px; /* space between username and glyph bar */
}

/* Hover effect */
.wall-tile:hover {
  transform: scale(1.02);
  box-shadow: 
    0 0 8px rgba(236, 213, 149, 0.35),
    0 0 20px rgba(236, 213, 149, 0.22),
    inset 0 0 6px rgba(255, 255, 200, 0.15);
  cursor: pointer;
}

/* Username container inside wall-tile */
.wall-tile .username {
  font-weight: bold;
  color: #cab15c;
  font-size: 14px;
  order: 1; /* ensure username is before glyph bar */
  user-select: none;
}

/* Images and videos inside wall tile */
.wall-tile img,
.wall-tile video {
  width: 100%;
  border-radius: 12px;
  border: 1px solid rgba(236, 213, 149, 0.15);
  box-shadow: 0 0 8px rgba(236, 213, 149, 0.25);
  display: block;
  object-fit: cover;
}

/* === Faded Text Fragment === */
.wall-tile .faded-text {
  font-family: 'Cinzel', serif;
  color: #d0c7aa;
  font-size: 13px;
  opacity: 0.7;
  text-align: center;
  margin-top: 6px;
}

.wall-tile.fade-out {
  opacity: 0;
  transform: scale(0.95);
  filter: blur(2px);
  transition: all 1.5s ease-in-out;
  pointer-events: none;
}

/* Rainbow Scrollbar scoped to wall */
.wall-container::-webkit-scrollbar {
  width: 10px;
}

.wall-container::-webkit-scrollbar-track {
  background: transparent;
}

.wall-container::-webkit-scrollbar-thumb {
  background: linear-gradient(
    to bottom,
    #c993ff,
    #e1b8ff,
    #ffe577,
    #a7fdd1,
    #94e8ff
  );
  animation: shimmerScroll 8s linear infinite;
}

@keyframes shimmerScroll {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}

.wall-container::-webkit-scrollbar-thumb:hover {
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.35);
}

.wall-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(10, 9, 13, 0.96);
  border: 2px solid #cab15c;
  border-radius: 10px;
  padding: 14px;
  z-index: 9999;
  display: none;
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.15);
  max-width: 95vw;
  max-height: 95vh;
  min-width: 220px; /* 👈 force space for header + close */
  padding-bottom: 20px; /* 👈 space even if media is short */
  overflow: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.wall-popup.show {
  display: block;
  animation: fadeInPopup 0.4s ease-out;
}

.wall-popup.hidden {
  display: none !important;
}

.wall-popup::before {
  content: "";
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  z-index: -1;
}
.wall-popup {
  animation: none !important;
  opacity: 1 !important;
}

.popup-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'Cinzel', serif;
  color: #ffe577;
  margin-bottom: 12px;
}

.close-btn {
  font-size: 18px;
  background: none;
  color: #ceb164;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.close-btn:hover {
  color: #a08742;
  text-shadow: 0 0 2.5px #ffe577, 0 0 2px #cab15c;
  transform: scale(1.05);
}

/* ✅ Make image resize cleanly within popup */
.popup-media {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: auto;
  padding: 14px;
}

.popup-media img,
.popup-media video {
  max-width: 100%;
  max-height: 100%;
  border-radius: 10px;
  object-fit: contain;
}


select.ghost-select {
  cursor: pointer; /* 👈 Changes arrow to hand on hover */
}
#spectralBlurOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  backdrop-filter: blur(16px); /* or 20px for max effect */
  background-color: rgba(5, 0, 15, 0.8); /* ⬅️ DARK overlay = 80% opacity */
  z-index: 99;
  transition: opacity 0.5s ease;
}
#spectralBlurOverlay.hidden {
  opacity: 0;
  pointer-events: none;
}

.reaction-count {
  font-size: 12px;
  margin-left: 4px;
  color: #aaa;
  background: rgba(0, 0, 0, 0.3);
  padding: 2px 5px;
  border-radius: 8px;
  font-family: 'Cinzel', serif;
}

.reaction-dropdown {
  position: absolute;
  z-index: 999;
  width: 220px;
  max-height: 220px; /* <-- sets the limit */
  overflow-y: auto;   /* <-- enables vertical scroll */
  background: #151216;
  border: 1px solid #cab15c;
  border-radius: 8px;
  box-shadow: 0 0 10px #cab15c;
  font-family: 'Cinzel', serif;
  color: #ffe577;
  padding: 10px;
}

.reaction-dropdown .ghost-reactor {
  padding: 6px;
  cursor: pointer;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.reaction-dropdown .ghost-reactor:hover {
  background: #29222e;
  color: #ffffff;
}

.hidden {
  display: none;
}

#ghostSendBtn {
  background: transparent;
  color: #cab15c; /* gold-ish tone */
  border: 1px solid #cab15c;
  border-radius: 4px;
  font-family: 'Cinzel', serif;
  padding: 6px 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

#ghostSendBtn:hover {
  background-color: #29222e; /* dark mystical background */
  color: #ffe577; /* brighter gold on hover */
  border-color: #ffe577;
}

@media (hover: none) {
  #ghostSendBtn:hover {
    box-shadow: none;
    transform: none;
  }
}


#ghostSendBtn:active {
  background-color: #3a3441;
  border-color: #cab15c;
}

.ghost-action-panel {
  position: absolute;
  z-index: 1000;
  background: #151216;
  border: 1px solid #cab15c;
  border-radius: 6px;
  padding: 8px;
  box-shadow: 0 0 10px #cab15c;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ghost-action-btn {
  background: transparent;
  color: #ffe577;
  border: 1px solid #cab15c;
  border-radius: 4px;
  font-family: 'Cinzel', serif;
  padding: 4px 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.ghost-action-btn:hover {
  background: #29222e;
  color: #ffffff;
}

.hidden {
  display: none !important;
}

.notif-bell img { 
  width: 32px;
  height: 32px;
  vertical-align: middle;
  animation: pulseRedGlow 5.6s infinite ease-in-out;
}

/* 🔵 USER bell: softer blue + faint red aura */
#notifBell img {
  filter:
    drop-shadow(0 0 2px rgba(0, 191, 255, 0.5))   /* 💠 subtle blue aura */
    drop-shadow(0 0 2px rgba(255, 0, 0, 0.2));    /* 🔴 faint red */
}

/* 🟡 WALL bell: subtle gold + faint red aura */
#wallBell .notif-bell img {
  filter:
    drop-shadow(0 0 2px rgba(255, 215, 0, 0.5))   /* ✨ soft gold */
    drop-shadow(0 0 2px rgba(255, 0, 0, 0.2));    /* 🔴 faint red */
}

/* 🔁 Light red pulse */
@keyframes pulseRedGlow {
  0% {
    filter:
      drop-shadow(0 0 2px rgba(0, 191, 255, 0.5))
      drop-shadow(0 0 1px rgba(255, 0, 0, 0.15));
  }
  50% {
    filter:
      drop-shadow(0 0 2px rgba(0, 191, 255, 0.5))
      drop-shadow(0 0 3px rgba(255, 0, 0, 0.4));
  }
  100% {
    filter:
      drop-shadow(0 0 2px rgba(0, 191, 255, 0.5))
      drop-shadow(0 0 1px rgba(255, 0, 0, 0.15));
  }
}


/* ✨ Smooth natural red pulse for WALL */
@keyframes pulseRedGlowWall {
  0% {
    filter:
      drop-shadow(0 0 4px rgba(255, 215, 0, 0.9))
      drop-shadow(0 0 2px rgba(255, 0, 0, 0.3));
  }
  50% {
    filter:
      drop-shadow(0 0 4px rgba(255, 215, 0, 0.9))
      drop-shadow(0 0 5px rgba(255, 0, 0, 0.7));   /* softer peak */
  }
  100% {
    filter:
      drop-shadow(0 0 4px rgba(255, 215, 0, 0.9))
      drop-shadow(0 0 2px rgba(255, 0, 0, 0.3));
  }
}





.ghost-id {
  cursor: pointer;
  pointer-events: auto; /* ensure clicks register */
}

.user-id.clickable, .ghost-user.clickable {
  cursor: pointer;
  color: #cab15c; /* gold-ish for mystic vibe */
  text-decoration: underline;
}

.user-id.clickable:hover, .ghost-user.clickable:hover {
  color: #ffe577;
  text-decoration: none;
}


.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(10, 10, 15, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.3s ease;
}

.modal.hidden {
  opacity: 0;
  pointer-events: none;
}

.modal-content {
  background: #1e1a2f;
  border: 2px solid #cab15c;
  padding: 24px 32px;
  border-radius: 12px;
  box-shadow: 0 0 20px #cab15c;
  max-width: 360px;
  text-align: center;
  color: #fff8e1;
  font-family: 'Cinzel', serif;
  position: relative;
}

.modal-btn {
  background-color: #cab15c;
  border: none;
  color: #1e1a2f;
  font-weight: 700;
  padding: 10px 24px;
  border-radius: 8px;
  cursor: pointer;
  margin-top: 20px;
  font-family: 'Cinzel', serif;
  transition: background-color 0.3s ease;
}

.modal-btn:hover {
  background-color: #e4d37a;
}

.covert-icon { 
  font-size: 18px;
  margin-left: 10px;
  cursor: pointer;
  color: #cab15c;
  transition: transform 0.2s, color 0.2s;
}
.covert-icon:hover {
  transform: scale(1.2);
  color: #ffe577;
}

.covert-popup {
  background: rgba(21, 19, 22, 0.95);
  color: #f5e6c3;
  border: 1px solid #cab15c;
  border-radius: 10px;
  padding: 10px;
  margin-top: 10px;
  font-family: 'Cinzel', serif;
  max-height: 240px; /* ⬆️ Expanded height */
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-sizing: border-box;
}

.covert-popup.hidden {
  display: none;
}

.covert-popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13.5px;
  color: #ffe577;
  padding: 0 6px;
  margin-bottom: 4px;
  line-height: 1;
  height: 24px;
  box-sizing: border-box;
}

.covert-title {
  font-weight: bold;
  font-family: 'Cinzel', serif;
  padding-top: 2px;
}

.covert-close {
  font-size: 13px;
  padding: 2px 6px;
  margin: 0;
  border: 1px solid #cab15c;
  border-radius: 4px;
  color: #cab15c;
  background: transparent;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
  box-sizing: border-box;
  flex-shrink: 0;
}
.covert-close:hover {
  background: #cab15c;
  color: #1a141e;
}

.covert-messages {
  flex: 1;
  background: #120f14;
  border-radius: 6px;
  padding: 4px 6px;
  font-size: 13px;
  line-height: 1.3;
  scrollbar-width: thin;
  color: #ffeccc;

  border: none;
  min-height: 80px;
  max-height: 80px;
  overflow-y: auto;
  margin-bottom: 6px;
}
.covert-messages::-webkit-scrollbar {
  width: 6px;
}

.covert-messages::-webkit-scrollbar-track {
  background: #0e0b10; /* Deep dark background */
  border-radius: 4px;
}

.covert-messages::-webkit-scrollbar-thumb {
  background: linear-gradient(to bottom, #cab15c, #8f7b3f);
  border-radius: 4px;
  box-shadow: inset 0 0 4px rgba(255, 255, 255, 0.1);
}

/* Firefox */
.covert-messages {
  scrollbar-width: thin;
  scrollbar-color: #cab15c #0e0b10;
}

.covert-popup textarea {
  width: 100%;
  height: 36px;
  min-height: 36px;
  max-height: 36px;
  background: #0e0b10; /* DARKER tone */
  color: #eae2c4;
  border: 1px solid #cab15c;
  border-radius: 4px;
  padding: 6px 8px;
  font-family: 'Cinzel', serif;
  font-size: 13px;
  resize: none;
  overflow: hidden;
  box-sizing: border-box;
}

.covert-popup button { 
  background: #1d1622; /* darker than before */
  color: #ffe577;
  border: 1px solid #cab15c;
  padding: 4px 8px;
  font-family: 'Cinzel', serif;
  font-size: 13px;
  align-self: flex-end;
  cursor: pointer;
  transition: background 0.2s ease;
}
.covert-popup button:hover {
  background: #cab15c;
  color: #1a141e;
}

.covert-messages > .covert-comment {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(202, 177, 92, 0.2);
  border-radius: 0;
  padding: 4px 6px;
  margin-bottom: 6px;
  box-shadow: none;
}

.covert-comment {
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(202, 177, 92, 0.2);
  border-radius: 0;
  padding: 4px 6px;
  margin-bottom: 6px;
  box-shadow: none;
}

.covert-comment:not(:last-child)::after {
  content: "";
  display: block;
  height: 1px;
  margin: 6px 0;
  background: linear-gradient(to right, transparent, #cab15c44, transparent);
}

/* 👻 Ghost ID */
.ghost-meta {
  font-family: 'Cinzel', serif;
  font-size: 13px;
  color: #cab15c;
  margin-bottom: 2px;
}

.ghost-message {
  font-size: 14px;
  color: #e7dfce;
  font-family: 'Spectral', serif;
  margin-left: 8px;
  line-height: 1.4;
}

/* 💬 Placeholder for reaction count or icon */
.ghost-reactions {
  font-size: 12px;
  color: #c4bba9;
  margin-top: 6px;
  text-align: right;
}

/* Scrollbox */
.covert-messages {
  max-height: 220px;
  overflow-y: auto;
  padding-right: 6px;
}

.ghost-pin {
  font-size: 16px;
  margin-left: 4px;
  filter: drop-shadow(0 0 3px #cab15c);
  vertical-align: middle;
}

.ghost-notification-row {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-left: 4px;
  margin-bottom: 6px;
}

.section-title {
  font-family: 'Cinzel', serif;
  font-size: 14px;
  color: #c6b4ff;
  text-shadow: 0 0 6px #c6b4ff;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}

.section-title:hover {
  color: #e0d2ff;
  text-shadow: 0 0 8px #e0d2ff, 0 0 14px #a38eff;
}

#wallNotificationCount {
  background: #2a1f3a;
  border-radius: 10px;
  padding: 2px 6px;
  font-size: 12px;
  color: #ffeefb;
  box-shadow: 0 0 6px #a874f8;
}

.ghost-notification-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px 0;
  gap: 10px;
}

.gold-title {
  font-family: 'Cinzel', serif;
  font-size: 14px;
  color: #ffe577;
}

.notif-bell {
  font-size: 16px;
  margin-left: 4px;
  cursor: pointer;
  color: #ffe577;
  text-shadow: 0 0 6px #ffe577;
}

.wall-title {
  font-family: 'Cinzel', serif;
  font-size: 14px;
  font-weight: normal;
  text-transform: none;
  color: #ffe577;
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  margin-top: 1px;
}

.glow-bell {
  color: #ffe577;
  text-shadow: 0 0 6px #ffe577, 0 0 12px rgba(255, 204, 102, 0.5); /* Only bell glows */
}


.wall-title:hover {
  color: #e0d2ff;
  text-shadow: 0 0 8px #e0d2ff, 0 0 14px #a38eff;
}

#wallNotificationCount {
  background: #2a1f3a;
  border-radius: 10px;
  padding: 2px 6px;
  font-size: 12px;
  color: #ffeefb;
  box-shadow: 0 0 6px #a874f8;
}

.notif-bell.active {
  color: #5B9421;
  text-shadow: 0 0 6px #5B9421, 0 0 12px rgba(91, 148, 33, 0.6);
}

.wall-bell.active {
  color: #51356A;
  text-shadow: 0 0 6px #51356A, 0 0 12px rgba(81, 53, 106, 0.6);
}

.ghost-notification-bar {
  background: rgba(21, 18, 24, 0.95); /* dark spectral tone */
  border: 1px solid #a58de4;
  border-radius: 10px;
  padding: 10px;
  box-shadow: 0 0 12px rgba(140, 120, 255, 0.25);
  transition: all 0.3s ease;
}

.ghost-notification {
  background: rgba(40, 30, 60, 0.35);  /* 🟣 Bauble feel preserved */
  border-radius: 8px;
  padding: 6px 12px;
  margin-bottom: 6px;
  color: #F3FEB8;  /* ✅ Muted gold text */
  font-family: 'Cinzel', serif;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
  cursor: pointer;
}

.ghost-notification:hover {
  background: rgba(105, 85, 140, 0.6); /* Slight glow tint */
  box-shadow: 0 0 12px #b597ff; /* ☑️ Glow on hover */
  transform: scale(1.01);
}

.hidden {
  display: none;
}

.media-preview-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  background: rgba(21, 19, 22, 0.95);
  border: 1px solid #cab15c;
  border-radius: 12px;
  padding: 16px 24px;
  max-width: 90%;
  max-height: 90%;
  overflow: auto;
  box-shadow: 0 0 24px rgba(255, 255, 255, 0.1), 0 0 32px #cab15c;
  animation: fadeInGhost 0.35s ease-out;
}

/* Make the container flex so content is centered */
#mediaPreviewContainer {
  display: flex;
  justify-content: center;
  align-items: center;
  max-height: 70vh; /* leave room for header/download */
  overflow: auto;
}

/* 🖼️ BIGGER VIEW: Scale images/videos/files larger */
#mediaPreviewContainer img,
#mediaPreviewContainer video,
#mediaPreviewContainer iframe {
  max-width: 95vw;     /* 📈 Increased from 100% to 95vw */
  max-height: 85vh;    /* 📈 Increased from 100% to 85vh */
  min-width: 60vw;     /* 📈 NEW: Minimum width for bigger display */
  min-height: 50vh;    /* 📈 NEW: Minimum height for bigger display */
  object-fit: contain; /* keeps aspect ratio */
  border-radius: 8px;
  display: block;
}

#mediaPreviewContainer audio {
  width: 100%;
}

/* 📱 Mobile (≤599px) */
@media (max-width: 599px) {
  #chatMediaPopup.media-preview-modal {
    position: fixed;
    inset: 0;                            
    display: grid;
    place-items: center;                 
    background: rgba(0,0,0,0.65);        
    z-index: 2147483647 !important;   /* 🚀 above chat popup */
    isolation: isolate;                /* new stacking context */
    transform: none !important;
  }

  /* Inner box */
  #chatMediaPopup .media-preview-content {
    position: relative;
    width: 100%;
    height: 100%;
    max-width: 100svw;
    max-height: 100dvh;
    border-radius: 0;
    background: rgba(12,10,14,0.96);
    box-shadow: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 2147483648;              /* keep media controls clickable */
  }

  /* Close button inside */
  #chatMediaPopup .media-close {
    position: absolute;
    top: 10px;
    right: 10px;
    color: #FFD54A;       /* gold X */
    font-size: 22px;      /* make a bit larger for tap targets */
    line-height: 1;
    cursor: pointer;
    z-index: 2;
    background: none;     /* no background */
    border: none;         /* no border */
    padding: 0;           /* remove spacing */
  }

  #chatMediaGhostID {
    text-align: center;
    margin-top: 36px;                    /* space below close button */
    margin-bottom: 10px;
    color: #fff;
    font-weight: 700;
  }

  /* 🖼️ MOBILE BIGGER VIEW: Even larger on mobile */
  #mediaPreviewContainer img,
  #mediaPreviewContainer video,
  #mediaPreviewContainer audio {
    max-width: 98vw;     /* 📈 Nearly full width on mobile */
    max-height: 92vh;    /* 📈 Nearly full height on mobile */
    min-width: 85vw;     /* 📈 Ensure minimum size on mobile */
    min-height: 60vh;    /* 📈 Ensure minimum height on mobile */
    border-radius: 8px;
    box-shadow: 0 0 12px rgba(255, 255, 255, 0.1);
    display: block;      /* prevent inline gaps */
    margin: 0 auto;      /* center horizontally */
    object-fit: contain; /* keep aspect ratio */
  }

  #chatMediaDownload {
    margin-top: 10px;
    align-self: center;
  }
}

/* 💻 Desktop/Tablet: Bigger view for larger screens */
@media (min-width: 600px) {
  .media-preview-modal {
    max-width: 95vw;     /* 📈 Larger modal on desktop */
    max-height: 95vh;    /* 📈 Larger modal on desktop */
  }
  
  #mediaPreviewContainer {
    max-height: 80vh;    /* 📈 More space for content */
  }
  
  #mediaPreviewContainer img,
  #mediaPreviewContainer video,
  #mediaPreviewContainer iframe {
    min-width: 50vw;     /* 📈 Minimum 50% viewport width */
    min-height: 40vh;    /* 📈 Minimum 40% viewport height */
  }
}

/* 🖥️ Large Desktop: Even bigger for big screens */
@media (min-width: 1200px) {
  #mediaPreviewContainer img,
  #mediaPreviewContainer video,
  #mediaPreviewContainer iframe {
    min-width: 60vw;     /* 📈 60% viewport width on large screens */
    min-height: 50vh;    /* 📈 50% viewport height on large screens */
  }
}



.ghost-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;                  /* space between lantern and text */
  font-size: 16px;
  font-weight: 700;
  color: #fff;
}

.ghost-title span {
  color: #FFF9B0; /* smooth gold */
  font-weight: 700;
  text-shadow: 
    0 0 6px rgba(255, 213, 74, 0.55),   /* gold inner glow */
    0 0 10px rgba(0, 255, 200, 0.6),    /* aqua glow */
    0 0 16px rgba(0, 191, 255, 0.5);    /* blue glow */
}


.lantern-icon {
  width: 40px;               /* fixed pixel width */
  height: 40px;              /* fixed pixel height */
  object-fit: contain;       /* keep proportions inside box */
  vertical-align: middle;
  filter: drop-shadow(0 0 6px rgba(0, 200, 255, 0.6));
}


@keyframes fadeInGhost {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

.media-preview-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.media-close {
  align-self: flex-end;
  font-size: 20px;
  cursor: pointer;
  color: #ffe577;
  text-shadow: 0 0 4px #cab15c;
}

#mediaPreviewContainer img,
#mediaPreviewContainer video,
#mediaPreviewContainer audio {
  max-width: 100%;
  max-height: 60vh;
  border-radius: 8px;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.1);
}

.download-btn {
  text-decoration: none;
  background: #2c2535;
  color: #ffe577;
  padding: 6px 14px;
  border-radius: 6px;
  font-family: 'Cinzel', serif;
  font-size: 14px;
  border: 1px solid #cab15c;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
}

.download-btn:hover {
  background: #3e2c56;
  color: #fff8e1;
}

.ghost-file-icon {
  font-family: 'Cinzel', serif;
  font-size: 14px;
  color: #8ecfff;
  text-decoration: underline;
  margin-top: 6px;
  transition: color 0.2s ease;
}

.ghost-file-icon:hover {
  color: #ffe577;
}

.chat-message.fade-out {
  opacity: 0;
  transform: translateY(8px) scale(0.97);
  filter: blur(1px);
  transition: all 0.4s ease-in-out;
}

#wallFilePopup { 
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2147483647 !important; /* Updated to maximum z-index */
  background: rgba(21, 19, 22, 0.97);
  border: 1px solid #cab15c;
  border-radius: 14px;
  padding: 20px 28px;
  max-width: 90%;
  max-height: 90%;
  overflow: auto;
  box-shadow:
    0 0 20px rgba(255, 255, 255, 0.05),
    0 0 30px #cab15c,
    inset 0 0 12px rgba(255, 255, 255, 0.04);
  /* Removed transition */
}

#popupMediaContainer img,
#popupMediaContainer video {
  display: block;
  max-width: 100%;
  max-height: 95vh;
  border-radius: 12px;
  margin: 12px auto 0 auto;
  object-fit: contain;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
  /* No z-index needed here since parent has it */
}

#popupUserID {
  color: #ffe577;
  font-weight: bold;
  text-align: center;
  font-family: 'Cinzel', serif;
  margin-top: 4px;
  font-size: 16px;
  text-shadow: 0 0 4px #cab15c;
}

#wallFilePopup .media-close {
  position: absolute;
  top: 6px;
  right: 10px;
  color: #ffe577;
  font-size: 20px;
  cursor: pointer;
  text-shadow: 0 0 6px #cab15c;
}

.notif-count-badge {
  position: absolute;
  top: -6px;
  right: -8px;
  background: #ff3b3b;
  color: white;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 50px;
  font-family: 'Cinzel', serif;
  box-shadow: 0 0 6px #ff3b3baa;
  animation: pulseGlow 1.8s infinite;
  z-index: 10;
  display: none;
}

.notif-bell {
  position: relative;
}

@keyframes pulseGlow {
  0%   { box-shadow: 0 0 6px #ff3b3b80; }
  50%  { box-shadow: 0 0 12px #ff3b3b; }
  100% { box-shadow: 0 0 6px #ff3b3b80; }
}

#wallBell .notif-count-badge {
  position: absolute;
  top: -6px;
  right: -8px;
  background: gold;
  color: black;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 50px;
  font-family: 'Cinzel', serif;
  box-shadow: 0 0 6px gold;
  animation: pulseWallGlow 1.8s infinite;
  z-index: 10;
  display: none;
}

@keyframes pulseWallGlow {
  0%   { box-shadow: 0 0 6px gold; }
  50%  { box-shadow: 0 0 12px gold; }
  100% { box-shadow: 0 0 6px gold; }
}

.ghost-dropdown-list {
  max-height: 130px;
  overflow-y: auto;
  scrollbar-width: thin;
  scroll-behavior: smooth;
}

/* Tile flash effect when opened via dropdown */
.highlight-glow {
  box-shadow: 0 0 12px 4px #cab15c;
  transition: box-shadow 0.3s ease-in-out;
}

/* WebKit scrollbar styling */
.ghost-dropdown-list::-webkit-scrollbar {
  width: 6px;
}

.ghost-dropdown-list::-webkit-scrollbar-thumb {
  background-color: #cab15c; /* 🟨 Gold tone */
  border-radius: 4px;
  border: 1px solid #5e4b1c; /* optional: subtle edge */
}

.ghost-dropdown-list::-webkit-scrollbar-track {
  background: transparent;
}

/* Firefox scrollbar styling */
.ghost-dropdown-list {
  scrollbar-color: #cab15c transparent;
  scrollbar-width: thin;
}

/* Dropdown item styling */
.ghost-dropdown-item {
  color: #ffe577;
  padding: 6px 12px;
  font-family: 'Cinzel', serif;
  font-size: 14px;
  border-bottom: 1px solid rgba(255, 222, 120, 0.1);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.ghost-dropdown-item:last-child {
  border-bottom: none;
}

.ghost-dropdown-list.hidden {
  display: none;
}

.ghost-dock-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: transparent;              /* ✅ Remove inner yellow fill */
  border: 2px solid #d3c377;            /* ✅ Mystic purple ring */
  box-shadow: none;
  overflow: hidden;
  flex-shrink: 0;
  margin-bottom: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}


.ghost-dock-slot:hover {
  transform: scale(1.05); /* Or remove this too */
  box-shadow: none;
}

/* 👻 Base avatar style in the dock */
.ghost-dock-avatar,
.dock-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  background: transparent;
  border: none;
  transition: box-shadow 0.3s ease;
}

/* ✨ Glow Animations */
@keyframes spectralPulse {
  from { transform: scale(1); box-shadow: 0 0 10px 4px rgba(255,255,255,0.3); }
  to   { transform: scale(1.1); box-shadow: 0 0 20px 6px rgba(255,255,255,0.6); }
}

.dock-avatar[class*="glow-"] {
  animation: spectralPulse 1.6s infinite ease-in-out alternate;
}

.glow-blue {
  box-shadow: 0 0 10px 3px #58b7ff !important;
}

.glow-red {
  box-shadow: 0 0 10px 3px #ff4a4a !important;
}

.glow-magenta {
  box-shadow: 0 0 10px 3px #ff5ef2 !important;
}

.glow-purple {
  box-shadow: 0 0 10px 3px #a58de4 !important;
}

.glow-green {
  box-shadow: 0 0 10px 3px #58ff58 !important;
}

.glow-orange {
  box-shadow: 0 0 10px 3px #ffaa3e !important;
}

.ghost-inline-row {
  display: flex;
  gap: 6px;
  flex-wrap: nowrap;
  overflow-x: hidden;      /* Hide scroll */
  overflow-y: hidden;
  padding: 6px 0;
  justify-content: flex-start;
  align-items: center;
}

.sigil-overlay {
  width: 100px;
  height: 100px;
  color: #e8d78a; /* Gold color */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  filter: none;
  opacity: 0.2; /* reduce opacity for misty look */
  transition: opacity 0.3s ease;
}

.sigil-overlay svg {
  stroke: #e8d78a !important;
  fill: none !important;
  filter: blur(1.5px); /* subtle blur for mist effect */
  opacity: 0.6; /* softer glow */
  transition: opacity 0.3s ease;
}

#ghostChatInput {
  width: 100%;
  resize: none;
  border-radius: 5px;
  background: #111;
  color: #eee;
  padding: 8px;
  border: 1px solid #444;
}
#ghostChatInput::-webkit-scrollbar {
  width: 8px;
}

#ghostChatInput::-webkit-scrollbar-track {
  background: #1a1a1a;
  border-radius: 4px;
}

#ghostChatInput::-webkit-scrollbar-thumb {
  background: #e2c275; /* golden like your Send button */
  border-radius: 4px;
  box-shadow: 0 0 5px #e2c275;
}

#ghostChatInput::-webkit-scrollbar-thumb:hover {
  background: #f3d88c; /* lighter gold on hover */
}

/* Firefox compatibility */
#ghostChatInput {
  scrollbar-color: #e2c275 #1a1a1a;
  scrollbar-width: thin;
}


/* Hide element */
.hidden { display: none !important; }

/* --- Modal shell --- */
.media-player-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.25s ease-out;
}

.media-player-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(3px);
  animation: backdropFade 0.25s ease-out;
}

/* --- Modal box --- */
.media-player-content {
  position: relative;
  z-index: 1;
  max-width: 720px;
  width: 92%;
  background: #0b0b0f;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.7);
  animation: slideUp 0.25s ease-out;
}

/* Close button */
.media-player-close {
  position: absolute;
  top: 8px;
  right: 12px;
  font-size: 28px;
  line-height: 1;
  background: transparent;
  border: 0;
  color: #eee;
  cursor: pointer;
  transition: color 0.2s;
}
.media-player-close:hover { color: #ff4d4d; }

/* --- Player elements --- */
.media-player-content video,
.media-player-content audio {
  width: 100%;
  height: auto;
  outline: none;
  display: block;
  background: #000;
  border-radius: 6px;
  margin-top: 6px;
}

/* Download button row */
.media-player-actions {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
}
.media-player-actions a {
  color: #4dc3ff;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s;
}
.media-player-actions a:hover {
  color: #77e3ff;
  text-decoration: underline;
}


/* ===============  MEDIA LINKS (chips inside chat)  =============== */
.media-link-box {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px; /* spacing between chips */
}

.media-link {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 20px;                    
  background: linear-gradient(
    135deg,
    rgba(30, 25, 50, 0.88),
    rgba(40, 32, 60, 0.92)
  ); /* dark violet with depth */
  color: #e6e0c2; /* muted gold text */
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid rgba(212, 175, 55, 0.35); /* soft gold border */
  box-shadow:
    0 0 6px rgba(152, 122, 255, 0.25),
    0 0 10px rgba(212, 175, 55, 0.15); /* faint gold haze */
  transition: all 0.3s ease;
}

.media-link:hover {
  background: linear-gradient(
    135deg,
    rgba(55, 45, 95, 0.95),
    rgba(70, 55, 120, 0.95)
  ); /* richer violet */
  color: #fff7cc; /* brighter gold text */
  border-color: rgba(212, 175, 55, 0.8);
  box-shadow:
    0 0 10px rgba(212, 175, 55, 0.6),
    0 0 18px rgba(152, 122, 255, 0.4),
    0 0 28px rgba(212, 175, 55, 0.5); /* layered gold glow */
  transform: translateY(-1px); /* tiny lift on hover */
}



/* Optional: keep inline player styling tidy if you still use it anywhere */
.inline-player video,
.inline-player audio {
  display: block;
  width: 100%;
  max-width: 100%;
  margin-top: 6px;
  border-radius: 10px;
  outline: none;
}

/* ===============  INLINE MEDIA CARD (image/video/audio in a box)  =============== */
/* Only needed if you use buildInlineMediaBox() somewhere */
.ghost-media-box {
  background: rgba(10, 10, 14, 0.85);
  border: 1px solid rgba(212, 175, 55, 0.8); /* gold-ish */
  border-radius: 14px;
  padding: 12px;
  margin-top: 8px;
  text-align: center;
  box-shadow: 0 6px 24px rgba(0,0,0,0.45);
}
.ghost-media-box img,
.ghost-media-box video {
  display: block;
  width: 100%;
  max-width: 100%;
  border-radius: 10px;
}
.ghost-media-box audio {
  display: block;
  width: 100%;
}
.ghost-download-btn {
  display: inline-block;
  margin-top: 10px;
  padding: 6px 12px;
  background: #101015;
  border: 1px solid #5f5f5f;
  border-radius: 8px;
  color: #d6d6d6;
  text-decoration: none;
  font-weight: 700;
}
.ghost-download-btn:hover {
  background: #1a1a22;
  border-color: rgba(212, 175, 55, 0.9);
  color: rgba(212, 175, 55, 0.95);
}

/* =======================  PORTAL VIEWER (FULL SCREEN)  ======================= */
/* ========= Overlay ========= */
/* ========= Ghost Viewer Overlay ========= */
.ghost-viewer.hidden { 
  display: none; 
}

.ghost-viewer {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(5, 5, 10, 0.85);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  animation: gv-fade-in 220ms ease-out both;
  overflow-y: auto; /* allow scrolling on smaller laptops */
}

/* ========= Frame (desktop-optimized) ========= */
.ghost-viewer-frame {
  position: relative;
  width: min(80vw, 900px);      /* desktop width tighter */
  max-height: 85vh;             /* shorter for laptops */
  padding: 24px 28px 32px;
  border-radius: 16px;

  /* Purple ring */
  border: 1px solid #5C3D64;
  outline: 2px solid rgba(92, 61, 100, 0.35);
  outline-offset: 0;

  background: rgba(12, 12, 18, 0.96);

  /* Gold glow */
  box-shadow:
    0 0 26px rgba(255, 218, 158, 0.45),
    0 0 60px rgba(255, 218, 158, 0.25),
    0 0 22px rgba(255, 218, 158, 0.30);

  animation: ghostAura 6s ease-in-out infinite;

  display: flex;
  flex-direction: column;
  overflow: hidden; /* contain inner scroll */
}


/* Inner content scrolling when overflow */
.ghost-viewer-frame > .content {
  overflow-y: auto;
  padding-right: 8px; /* space for scrollbar */
  max-height: calc(85vh - 60px); /* minus padding/header */
}

/* ========= Close button ========= */
.ghost-viewer-close {
  position: absolute;
  top: 10px;
  right: 12px;
  background: none;
  border: none;
  color: #cfc7ff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  text-shadow:
    0 0 6px rgba(160, 130, 255, 0.8),
    0 0 12px rgba(212, 175, 55, 0.2);
  transition: color .2s ease, text-shadow .2s ease, transform .2s ease;
}
.ghost-viewer-close:hover,
.ghost-viewer-close:focus {
  color: #fff7cc;
  text-shadow:
    0 0 10px rgba(212, 175, 55, 0.9),
    0 0 18px rgba(212, 175, 55, 0.7),
    0 0 28px rgba(152, 122, 255, 0.6);
  transform: scale(1.06);
}


/* Desktop: resize frame shorter */
@media (min-width: 1367px) {
  .ghost-viewer-frame {
    width: min(65vw, 880px);   /* narrower */
    max-height: 70vh;          /* shorter */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;          /* no scroll */
  }

  .ghost-viewer-frame video,
  .ghost-viewer-frame img {
    width: 100%;
    height: auto;
    max-height: 60vh;          /* keep media inside shorter box */
    object-fit: contain;
  }

  #ghostViewerDownload.ghost-download-btn {
    align-self: center;
    margin-top: 12px;
    margin-bottom: 4px;
  }
}


/* Laptop fix: keep the footer visible */
/* Laptop fix: resize content instead of adding scroll */
@media (max-width: 1366px) {
  .ghost-viewer-frame {
    width: min(75vw, 820px);
    max-height: 78vh;       /* cap overall height */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* space for button */
    overflow: hidden;       /* no scroll */
  }

  /* Video / image auto-scale */
  .ghost-viewer-frame video,
  .ghost-viewer-frame img {
    max-width: 100%;
    max-height: 65vh;   /* keep room for button */
    object-fit: contain; /* keep aspect ratio */
    flex: 1 1 auto;     /* shrink if needed */
  }

  /* Download button stays visible */
  #ghostViewerDownload.ghost-download-btn {
    align-self: center;
    margin-top: 12px;
    margin-bottom: 4px;
  }
}



/* Small tablets & mobiles (≤ 768px) */
@media (max-width: 768px) {
  .ghost-viewer-frame {
    width: 96vw;
    max-height: 92vh;
    border-radius: 12px;
  }
}


/* ========= Body / Media ========= */
.ghost-viewer-body {
  margin-top: 14px;
  text-align: center;
}
.ghost-viewer-body video,
.ghost-viewer-body audio,
.ghost-viewer-body img {
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 100%;
  border-radius: 12px;
  outline: none;
  background: #000;
  padding: 6px;
  box-shadow: 0 0 18px rgba(140, 110, 255, 0.55);
}

/* ========= Download button (subtle dual aura) ========= */
#ghostViewerDownload.ghost-download-btn {
  display: inline-block;
  margin-top: 18px;
  padding: 10px 22px;
  font-size: 15px;
  background: rgba(20, 20, 30, 0.95);
  border: 1px solid rgba(180, 150, 255, 0.6);
  border-radius: 10px;
  color: #ddd;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.4px;
  transition: all 0.25s ease;
}
#ghostViewerDownload.ghost-download-btn:hover {
  background: rgba(30, 30, 50, 1);
  border-color: rgba(212, 175, 55, 0.9);
  color: #fff7cc;
  box-shadow:
    0 0 10px rgba(180, 150, 255, 0.7),
    0 0 16px rgba(212, 175, 55, 0.8);
}

/* ========= Animations ========= */
@keyframes ghostAura {
  0% {
    box-shadow:
      0 0 26px rgba(152, 122, 255, 0.45),
      0 0 60px rgba(90, 70, 200, 0.35),
      0 0 18px rgba(212, 175, 55, 0.25);
    border-color: rgba(212, 175, 55, 0.35);
    outline-color: rgba(212, 175, 55, 0.18);
  }
  50% {
    box-shadow:
      0 0 42px rgba(152, 122, 255, 0.65),
      0 0 86px rgba(90, 70, 200, 0.5),
      0 0 30px rgba(212, 175, 55, 0.50);
    border-color: rgba(255, 215, 100, 0.55);
    outline-color: rgba(255, 215, 100, 0.28);
  }
  100% {
    box-shadow:
      0 0 26px rgba(152, 122, 255, 0.45),
      0 0 60px rgba(90, 70, 200, 0.35),
      0 0 18px rgba(212, 175, 55, 0.25);
    border-color: rgba(212, 175, 55, 0.35);
    outline-color: rgba(212, 175, 55, 0.18);
  }
}

@keyframes gv-fade-in {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

/* ======== PORTAL VIEWER: MOBILE TOP LAYER ======== */
@media (max-width: 599px) {
  .ghost-viewer {
    z-index: 2147483647 !important;   /* max priority */
    pointer-events: auto !important;  /* ensure taps pass */
    isolation: isolate;               /* own stacking context */
  }

  .ghost-viewer-frame {
    z-index: 2147483648 !important;   /* even above the backdrop */
    position: relative;
  }

  .ghost-viewer-close {
    z-index: 2147483649 !important;   /* always tappable */
    position: relative;
  }
}

/* ========= Mobile ≤ 599px tweaks ========= */
@media (max-width: 599px) {
  .ghost-viewer {
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .ghost-viewer-frame {
    width: 100vw;
    height: auto;
    max-height: 94vh;
    padding: 12px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .ghost-viewer-body {
    flex: 1;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .ghost-viewer-body video,
  .ghost-viewer-body img {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 70vh;  /* video/image gets most of the screen */
    object-fit: contain;
  }

  .ghost-viewer-body audio {
    width: 100%;
  }

  .ghost-viewer-close {
  position: absolute;    /* anchor inside parent */
  top: 6px;
  right: 10px;
  font-size: 20px;
  line-height: 1;
  background: none;
  border: none;
  cursor: pointer;
  color: #cfc7ff;
  z-index: 10;           /* stay above content */
}

  #ghostViewerDownload.ghost-download-btn {
    margin-top: 12px;
    align-self: center;
    font-size: 14px;
    padding: 8px 16px;
  }
}


/* ========= Reduced motion ========= */
@media (prefers-reduced-motion: reduce) {
  .ghost-viewer, .ghost-viewer-frame { animation: none !important; }
}


/* ========= Mobile ≤ 599px tweaks ========= */
@media (max-width: 599px) {
  .ghost-viewer {
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .ghost-viewer-frame {
    width: 100vw;
    height: auto;
    max-height: 94vh;
    padding: 12px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }

  .ghost-viewer-body {
    flex: 1;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .ghost-viewer-body video,
  .ghost-viewer-body img {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 70vh; /* video/image gets most of the screen */
    object-fit: contain;
  }

  .ghost-viewer-body audio { width: 100%; }

  .ghost-viewer-close { top: 6px; right: 10px; font-size: 20px; }

  #ghostViewerDownload.ghost-download-btn {
    margin-top: 12px;
    align-self: center;
    font-size: 14px;
    padding: 8px 16px;
  }

  /* Focus icon (only visible on mobile) */
  .right-panel .focus-icon {
    display: inline-flex;
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 3;
    appearance: none;
    border: 0;
    background: transparent;
    font-size: 18px;
    padding: 6px 8px;
    line-height: 1;
    cursor: pointer;
  }
  .right-panel-header { position: relative; }

  /* Focus mode: no dim background */
  .focus-active .app-root::after { content: none; }

  /* Collapse left panel into rail */
  .focus-active .left-panel {
    width: var(--rail-w);
    min-width: var(--rail-w);
    max-width: var(--rail-w);
    overflow: hidden;
    transition: width 180ms ease;
    pointer-events: none; /* block taps behind overlay */
  }

  /* Right panel overlay under top menu */
  .right-panel.focus-overlay {
    position: fixed;
    top: var(--topbar-h);
    left: 0;
    right: 0;
    height: calc(100dvh - var(--topbar-h));
    background: transparent;
    z-index: 1200; /* BELOW chat */
    display: flex;
    flex-direction: column;
    box-shadow: 0 -12px 32px rgba(0,0,0,0.35);
    transition: transform 200ms ease, height 200ms ease;
    transform: none;   /* avoid stacking context */
    filter: none;      /* avoid stacking context */
  }

  /* Fullscreen snap still respects menu */
  .right-panel.focus-overlay.full {
    height: calc(100dvh - var(--topbar-h));
  }

  /* Grab bar */
  .focus-grab {
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: sticky;
    top: 0;
    z-index: 2;
    cursor: ns-resize;
  }
  .focus-grab::before {
    content: "";
    width: 72px;
    height: 6px;
    border-radius: 999px;
    background: rgba(168,139,255,.65);
    box-shadow: 0 0 16px rgba(255,215,128,.6);
  }

  /* Keep right panel under the chat on mobile */
  body.mobile-chat-active .right-panel,
  body.mobile-chat-active .right-panel .sticky,
  body.mobile-chat-active .right-panel .sticky-header,
  body.mobile-chat-active .right-panel .floating-actions,
  body.mobile-chat-active .right-panel .tile-actions,
  body.mobile-chat-active .right-panel .quick-menu {
    z-index: 1200 !important;
  }

  .right-panel.focus-overlay,
  .right-panel.focus-overlay.full {
    position: fixed;
    top: var(--topbar-h);
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: calc(100dvh - var(--topbar-h));
    background: rgba(0,0,0,0.65);  /* darker veil */
    backdrop-filter: blur(6px);    /* blur effect */
    -webkit-backdrop-filter: blur(6px); /* safari */
    z-index: 1200;
  }

  /* Ensure nothing behind is scrollable or clickable */
  body.focus-active {
    overflow: hidden;
  }

  /* If you don’t want the ::after veil at all, disable it */
  .focus-active .app-root::after {
    content: none !important;
  }



  /* Make sure chat popup floats above all */
  body:not(.media-open) #ghostChatPopup,
  body:not(.media-open) .ghost-chat-popup {
    position: fixed;
    z-index: 2147483647 !important;
    left: 50%;
    transform: translateX(-50%);
  }
}

/* ========= Reduced motion ========= */
@media (prefers-reduced-motion: reduce) {
  .ghost-viewer,
  .ghost-viewer-frame,
  .right-panel.focus-overlay {
    animation: none !important;
    transition: none !important;
  }
}

/* Mirror ONLY when front camera is active */
#videoPreview.mirror {
  transform: scaleX(-1);
  transform-origin: center;
}  


/* Hide everywhere by default */
#focusToggle { display: none; }

/* Show only on small screens */
@media (max-width: 599px) {
  #focusToggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    padding: 6px 8px;
    margin-left: 8px;
    cursor: pointer;
    background: transparent;
    border: none;
    color: #fff;
  }
}

@media (max-width: 599px){
  :root { --veil: rgba(0,0,0,0.55); }
  .focus-active .app-root::after{
    content:"";
    position: fixed;
    inset: 0;
    background: var(--veil);
    z-index: 30;
    pointer-events: none;
  }
}
/* lock background when focused */
body.no-scroll { overflow: hidden; }

/* Show only on small screens */
@media (max-width: 599px) {

  /* ANCHOR (no transforms here) */
  #focusToggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 12px;              /* fix size so layout won't shift */
    height: 12px;
    padding: 0;
    margin-left: 8px;
    line-height: 0;           /* kill baseline jiggle */
    vertical-align: middle;   /* stable inline alignment */
    background: transparent;
    border: none;
    cursor: pointer;
    color: #fff;
    text-shadow: 0 0 6px #ffd86b, 0 0 12px #ffae42; /* golden standby glow */
    /* no transform or animation on the button */
  }

  /* Hover: brighter only (no transform on button) */
  #focusToggle:hover {
    color: #ffd86b;
    text-shadow: 0 0 10px #ffd86b, 0 0 18px #ffae42;
  }

  /* Active: purple aura, no transform */
  #focusToggle[aria-pressed="true"] {
    color: #c084fc;
    text-shadow: 0 0 10px #c084fc, 0 0 22px #a855f7;
  }

  /* ICON (the only thing that animates) */
  .focus-icon img.focus-img {
    display: block;
    width: 20px;
    height: 20px;
    pointer-events: none;
    filter: drop-shadow(0 0 6px #ffd86b) drop-shadow(0 0 12px #ffae42);
    transform-origin: center center;
    transform: translateZ(0);     /* avoids subpixel wobble */
    transition: filter .3s ease, transform .3s ease;
  }

  /* Hover glow + tiny scale on image */
  #focusToggle:hover .focus-img {
    filter: drop-shadow(0 0 10px #ffd86b) drop-shadow(0 0 18px #ffae42);
    transform: scale(1.06);
  }

  /* Active: purple pulse on image only */
  #focusToggle[aria-pressed="true"] .focus-img {
    filter: drop-shadow(0 0 10px #c084fc) drop-shadow(0 0 22px #a855f7);
    animation: imgPulse 3s ease-in-out infinite;
  }

  @keyframes imgPulse {
    0%, 100% { transform: scale(1);   }
    50%      { transform: scale(1.08); }
  }
}


/* === MOBILE CHAT-ONLY PATCH (≤599px) — nice popup when focus is active === */
@media (max-width: 599px) {

  /* 1) Float the chat popup above the focused right panel */
  .focus-active #ghostChatPopup,
  .focus-active .ghost-chat-popup {
    position: fixed !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    bottom: calc(env(safe-area-inset-bottom, 0) + 20px) !important; /* dock near bottom */
    top: auto !important;
    right: auto !important;
    z-index: 2147483647 !important;  /* top plane */
    pointer-events: auto !important;
    /* Optional comfort (uncomment if your chat can overflow the screen) */
    /* max-width: min(92vw, 560px); */
    /* max-height: 80vh; overflow-y: auto; */
  }

  /* 2) While the chat popup is visible, relax the right-panel overlay so iOS/Chrome
        don't trap it under the blur, and ensure taps go to chat */
  .focus-active:has(#ghostChatPopup:not([hidden]):not(.hidden)) .right-panel.focus-overlay,
  .focus-active:has(.ghost-chat-popup:not([hidden]):not(.hidden)) .right-panel.focus-overlay {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    pointer-events: none !important; /* make the chat receive touches */
  }

  /* 3) Mobile typing comfort (prevents Safari zoom-on-focus) */
  #ghostChatPopup input, #ghostChatPopup textarea,
  .ghost-chat-popup input, .ghost-chat-popup textarea {
    font-size: 16px;  /* iOS */
  }
}

@media (max-width: 599px) {
  /* Tune if needed */
  :root { --ap-bottom: calc(env(safe-area-inset-bottom, 0) + 20px); }

  /* Keep trigger visible above overlay; add one of these classes to your button */
  .action-trigger, .react-btn, .user-action-btn {
    position: relative !important;
    z-index: 10055 !important; /* above overlay (1200), below dropdown (10060) */
    pointer-events: auto !important;
  }

  /* Base position for the panel (works for any of these IDs/classes) */
  #userIdActionPanel,
  .user-action-panel,
  .ghost-action-panel,
  #ghostActionPanelHover,
  #ghostActionPanelWall {
    position: fixed !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    bottom: var(--ap-bottom) !important;
    top: auto !important;
    right: auto !important;
    z-index: 10070 !important;   /* above right panel overlay */
    pointer-events: auto !important;
    isolation: isolate;          /* own stacking context */
    overflow: visible !important;
    /* Default closed state: let JS toggle visibility with .ap-open on body */
    visibility: hidden;
    opacity: 0;
     bottom: calc(env(safe-area-inset-bottom, 0) + 8px) !important; /* lower than before */
  }

  /* When open, make panel fully visible */
  body.ap-open #userIdActionPanel,
  body.ap-open .user-action-panel,
  body.ap-open .ghost-action-panel,
  body.ap-open #ghostActionPanelHover,
  body.ap-open #ghostActionPanelWall {
    visibility: visible;
    opacity: 1;
  }

  /* Ensure decorative veils/glows don’t cover controls */
  #userIdActionPanel::before, #userIdActionPanel::after,
  .user-action-panel::before, .user-action-panel::after,
  .ghost-action-panel::before, .ghost-action-panel::after,
  #ghostActionPanelHover::before, #ghostActionPanelHover::after,
  #ghostActionPanelWall::before,  #ghostActionPanelWall::after {
    z-index: 0 !important;
    pointer-events: none !important;
  }
  #userIdActionPanel button, #userIdActionPanel .btn, #userIdActionPanel a,
  .user-action-panel button, .user-action-panel .btn, .user-action-panel a,
  .ghost-action-panel button, .ghost-action-panel .btn, .ghost-action-panel a,
  #ghostActionPanelHover button, #ghostActionPanelHover .btn, #ghostActionPanelHover a,
  #ghostActionPanelWall button,  #ghostActionPanelWall .btn,  #ghostActionPanelWall a {
    position: relative; z-index: 2 !important; pointer-events: auto;
  }

  /* Reaction dropdown should float above the panel */
  .reaction-dropdown {
    position: fixed !important;
    z-index: 10060 !important;
    max-height: 60vh; overflow-y: auto;
  }

  /* While the panel is open, relax right-panel blur so taps reach the panel */
  body.ap-open .right-panel.focus-overlay {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    pointer-events: none !important;
  }
}





/* ========================
   Vars
======================== */
:root{
  --preview-w: clamp(320px, 56vw, 560px);
  --card-pad-x: 16px;
  --card-pad-y: 14px;
}

/* ========================
   Default (non-expanded)
======================== */
#mediaPopupContent{
  width: calc(var(--preview-w) + (var(--card-pad-x) * 2));
  max-width: min(96vw, 780px);
  padding: var(--card-pad-y) var(--card-pad-x) 10px;
  box-sizing: border-box;
  margin: 0 auto;
}

#previewArea{
  position: relative;
  width: var(--preview-w);
  max-width: 100%;
  margin: 10px auto 12px;
  display: grid;
  place-items: center;
  overflow: visible; /* keep expand chip visible */
}

.media-controls,
.media-actions,
.fade-warning{
  width: var(--preview-w);
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* Media surface */
#previewArea video,
#previewArea canvas{
  width: 100%;
  max-width: 640px;
  aspect-ratio: 4 / 3;
  height: auto;
  object-fit: contain; /* Fit in default */
  border-radius: 10px;
}

/* Expand chip */
#previewArea .preview-expand-btn{
  position: absolute;
  top:  calc(env(safe-area-inset-top, 0px) + 8px);
  right: calc(env(safe-area-inset-right, 0px) + 8px);
  z-index: 4;
  padding: 4px 8px;
  border-radius: 8px;
  cursor: pointer;
  background: rgba(12,10,16,.65);
  color: #eedd90;
  border: 1px solid rgba(206,178,255,.55);
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
}
#previewArea .preview-expand-btn:hover{ transform: scale(1.06); }

/* Header/X always visible */
.media-popup-header{
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(12,10,16,.85);
  backdrop-filter: blur(6px);
  padding-block: 8px;
}
.media-close{
  position: absolute;
  right: calc(env(safe-area-inset-right, 0px) + 10px);
  top:  calc(env(safe-area-inset-top,   0px) + 6px);
  z-index: 21;
}

/* Keep UI over media */
.media-controls, .media-actions{ position: relative; z-index: 15; }

/* ========================
   Expanded (all devices)
======================== */
#previewArea.preview-expanded{
  --chrome: 160px;  /* JS overwrites with header+controls height */
  --shrink: 5dvh;   /* general extra reduction */
  height:     calc(100dvh - var(--chrome) - var(--shrink));
  min-height: calc(100dvh - var(--chrome) - var(--shrink));
  width: 100%;
  display: block;
  margin-top: 6px;
}
#previewArea.preview-expanded video,
#previewArea.preview-expanded canvas{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  aspect-ratio: auto;
  object-fit: cover;  /* use 'contain' if you prefer no cropping */
  border-radius: 14px;
  z-index: 1;
}

/* Keep popup tidy when expanded */
.media-popup-content:has(#previewArea.preview-expanded){
  max-height: 97dvh;
  overflow: hidden;
  padding-top:    calc(env(safe-area-inset-top,    0px) + 4px);
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
}

/* ========================
   Desktop/Laptop ONLY
======================== */

/* 1) First open (non-expanded) much smaller */
@media (min-width: 900px){
  #mediaPopupContent:not(:has(#previewArea.preview-expanded)){
    --open-w: clamp(240px, 22vw, 380px); /* ← knob for first-open width */
    width: calc(var(--open-w) + (var(--card-pad-x) * 2)) !important;
    max-width: none !important;
    margin-inline: auto;
  }
  #mediaPopupContent:not(:has(#previewArea.preview-expanded)) #previewArea,
  #mediaPopupContent:not(:has(#previewArea.preview-expanded)) .media-controls,
  #mediaPopupContent:not(:has(#previewArea.preview-expanded)) .media-actions,
  #mediaPopupContent:not(:has(#previewArea.preview-expanded)) .fade-warning{
    width: var(--open-w) !important;
    max-width: 100%;
    margin-inline: auto;
  }
}

/* 2) Expanded = ~75% of viewport width + shorter height */
@media (min-width: 900px){
  #mediaPopupContent:has(#previewArea.preview-expanded){
    --desk-gutter: clamp(12px, 2vw, 32px);
    --desk-scale: 0.75; /* 75% of viewport width */
    width: calc((100vw * var(--desk-scale)) - (var(--desk-gutter) * 2)) !important;
    max-width: none !important;
    margin-inline: auto;
    --preview-w: 100%;
  }
  #previewArea.preview-expanded{
    width: 100% !important;
    --shrink: 18dvh;  /* shorter on desktop/laptop */
  }
  #mediaPopupContent:has(#previewArea.preview-expanded) .media-controls,
  #mediaPopupContent:has(#previewArea.preview-expanded) .media-actions,
  #mediaPopupContent:has(#previewArea.preview-expanded) .fade-warning{
    width: calc((100vw * var(--desk-scale)) - (var(--desk-gutter) * 2)) !important;
    max-width: none !important;
    margin-inline: auto;
  }
}

/* Optional: short screens shrink a bit less */
@media (max-height: 700px){
  #previewArea.preview-expanded{ --shrink: 12dvh; }
}

/* Tiny phones: tuck the expand chip in a bit */
@media (max-width: 480px){
  #previewArea .preview-expand-btn{
    top:  calc(env(safe-area-inset-top,  0px) + 6px);
    right: calc(env(safe-area-inset-right,0px) + 6px);
    padding: 3px 7px;
  }
}
/* Hide expand chip when we're in audio mode (video is hidden) */
#previewArea:has(#videoPreview.hidden) .preview-expand-btn{
  display: none !important;
}


/* Force purple ring + softer gold glow */
.ghost-viewer .ghost-viewer-frame,
.ghost-viewer-frame {
  /* Ring (purple) */
  border-top-color: #a279ff !important;
  border-right-color: #5C3D64 !important;
  border-bottom-color: #a279ff !important;
  border-left-color:  #5C3D64 !important;
  outline-color: rgba(92, 61, 100, 0.35) !important;

  /* Softer Glow (gold) */
  box-shadow:
    0 0 26px rgba(255, 218, 158, 0.25),
    0 0 60px rgba(255, 218, 158, 0.15),
    0 0 22px rgba(255, 218, 158, 0.20) !important;
}



#previewArea{ position:relative; }
#videoPreview,#imagePreview, #audioVisualizer{
  width:100%; height:100%; max-height:340px; object-fit:cover; display:block;
}
.preview-expanded #videoPreview,
.preview-expanded #imagePreview,
.preview-expanded #audioVisualizer{ max-height:70vh; }


#flashToggle.ghost-btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}
#flashToggle.ghost-btn.active {
  box-shadow: 0 0 0 2px rgba(255, 221, 0, 0.6) inset;
}


.ghost-preview-screen { display: none; opacity: 0; transition: opacity .35s ease; }
.ghost-preview-screen.show { display: flex; opacity: 1; }

.pw-wrap { position: relative; }
.eye-btn:hover { opacity: 1; }


/* ——— Card: shorter + narrower ——— */
#ghostAuthStack{
  max-width: 440px !important;   /* was 460 */
  padding: 10px 10px !important;
  gap: 8px !important;            /* was 10 */
  border-radius: 8px !important;
}

/* Remove stray spacing inside */
#ghostAuthStack *{ margin: 0 !important; box-sizing: border-box; }

/* Section titles (e.g., Welcome back / New Ghost...) */
#gpLogin > div:first-child,
#gpRegister > div:first-child{
  margin-bottom: 6px !important;  /* keep a tiny breathing room */
  font-size: .92rem !important;
}

/* Labels tighter */
#ghostAuthStack label{ font-size: .88rem !important; margin-bottom: 4px !important; }

/* ——— Controls: same height ——— */
:root { --ctl-h: 34px; }          /* tweak this to 32px if you want even smaller */

#ghostAuthStack input,
#ghostAuthStack select{
  height: var(--ctl-h) !important;
  padding: 6px 32px 6px 10px !important;
  border-radius: 8px !important;
  font-size: .9rem !important;
}


#ghostAuthStack .eye-btn {
  position: absolute;
  top: 0; 
  right: 0;                         /* sits at the very end */
  height: 100%;                     /* fill full input height */
  width: 38px;                      /* adjust width so it matches design */
  border: none;
  background: transparent;           /* keep background clear */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  cursor: pointer;
}


/* ——— Buttons match input height ——— */
#ghostAuthStack button{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: var(--ctl-h) !important;    /* identical to inputs */
  padding: 0 12px !important;         /* horizontal only */
  border-radius: 8px !important;
  font-size: .9rem !important;
  line-height: 1 !important;
}

/* Action rows tight */
#gpLogin > div[style*="display:flex"],
#gpRegister > div[style*="display:flex"]{
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 6px !important;
  flex-wrap: wrap !important;
}

/* Messages compact */
#gpMsgLogin,#gpMsgRegister,#gpMsgWord,#gpMsgEmail{
  font-size: .82rem !important; line-height: 1.25 !important; margin-top: 6px !important;
}

/* Thin card borders so it feels lighter (optional) */
#ghostAuthStack{
  border-top: 1px solid rgba(255,255,255,.10) !important;
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
}


/* floating menu */
.gp-dd {
  position: absolute;
  background: #131017;
  color: #ffe577;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 8px;
  max-height: 220px;          /* reduced height */
  overflow-y: auto;
  z-index: 9999;
  box-shadow: 0 6px 18px rgba(0,0,0,.4);

  /* keep menu tight to the select */
  margin-top: 2px;            /* was too low */
  font-size: 13px;            /* smaller text */
  line-height: 1.3;
}

/* items */
.gp-dd-item {
  padding: 6px 10px;          /* smaller padding */
  cursor: pointer;
  white-space: nowrap;
}
.gp-dd-item:hover,
.gp-dd-item.is-active {
  background: rgba(162,121,255,.25);
  color: #fff;
}

/* pretty scrollbar (webkit) */
.gp-dd::-webkit-scrollbar { width: 6px; }
.gp-dd::-webkit-scrollbar-thumb {
  background: rgba(255,229,119,.4);
  border-radius: 6px;
}

/* Style for Country dropdown scrollbar */
#gpCountry::-webkit-scrollbar {
  width: 6px;
}

#gpCountry::-webkit-scrollbar-thumb {
  background: rgba(255,229,119,.4); /* gold glow */
  border-radius: 6px;
}

#gpCountry::-webkit-scrollbar-track {
  background: rgba(255,255,255,.08); /* faint track */
  border-radius: 6px;
}



.gp-help {
  margin-top: 6px;
  color: 	#a7afb3;
  font-size: .92rem;
}

.gp-help-link {
  color: #cbb6ff;
  text-decoration: none;
}

.gp-help-link:hover {
  text-decoration: underline;
}

.ghost-help-icon {
  width: 32px;
  height: 32px;
  vertical-align: middle;
  margin-right: 6px;
  transition: filter 0.3s ease, transform 0.2s ease;
}

/* Hover glow */
.ghost-help-icon:hover {
  filter: drop-shadow(0 0 6px #a279ff) drop-shadow(0 0 12px #ffe577);
  transform: scale(1.1);
}

/* Active click glow */
.ghost-help-icon:active {
  filter: drop-shadow(0 0 8px #6fffe9) drop-shadow(0 0 16px #ffe577);
  transform: scale(0.95);
}

.ghost-inline-icon {
  width: 32px;       /* slightly smaller than text */
  height: 32px;
  vertical-align: middle;
  margin-right: 6px;
  transition: filter 0.3s ease, transform 0.2s ease;
}

/* Hover glow effect (same vibe as your help ghost) */
a:hover .ghost-inline-icon {
  filter: drop-shadow(0 0 4px #a279ff) drop-shadow(0 0 8px #6fffe9);
  transform: scale(1.1);
}

#gpMsgRegister {
  margin-top: 8px;
  color: #ff9a9a;
  font-size: .95rem;
  font-weight: 600;
  text-shadow: none !important; /* kills glow */
}

#linkToLogin {
  color: #717af0;
  text-decoration: underline;
  text-shadow: none !important; /* no glow */
}

#linkToLogin:hover {
  color: #a0a7ff; /* softer hover, no glow */
  text-decoration: underline;
  text-shadow: none !important;
}