@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@600;700&family=JetBrains+Mono:wght@400;500;700&family=Outfit:wght@400;500;600;700;800;900&family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=Space+Grotesk:wght@500;600;700;800&display=swap');

/* ═══════════════════════════════════════════════════════════════════
   LIQUID GLASS & FLUID INTERFACES DESIGN SYSTEM - GLOBALCHAT 365
   Core physics, materials, optical typography, depth, and kinetic motion
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* ═══════════ 1. DESIGN TOKENS & UNIFIED TYPOGRAPHY (LANDING MATCH) ═══════════ */
  --font-display: 'Outfit', sans-serif;
  --font-body: 'Plus Jakarta Sans', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --font-hand: 'Caveat', cursive;

  --gc-font-display: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --gc-font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --gc-font-mono: 'JetBrains Mono', monospace;

  /* Backward Compatibility Stacks */
  --apple-font-display: var(--gc-font-display);
  --apple-font-body: var(--gc-font-body);
  --apple-font-mono: var(--gc-font-mono);

  /* Landing Page Native Color Accents */
  --accent-mint: #10B981;
  --accent-mint-dark: #059669;
  --accent-azure: #2563EB;
  --accent-cyan: #06B6D4;
  --accent-violet: #7C3AED;
  --accent-purple: #C084FC;
  --accent-gold: #F59E0B;
  --accent-amber: #D97706;
  --accent-crimson: #EF4444;
  --accent-rose: #EC4899;
  --accent-sky: #38BDF8;

  /* Primary Brand Roles */
  --color-brand-primary: var(--accent-mint);
  --color-brand-secondary: var(--accent-mint-dark);
  --color-brand-glow: rgba(16, 185, 129, 0.28);

  --gc-primary: #10B981;
  --gc-primary-hover: #059669;
  --gc-primary-glow: rgba(16, 185, 129, 0.35);
  --gc-accent: #34D399;
  --gc-accent-subtle: #ECFDF5;
  --gc-gradient-primary: linear-gradient(135deg, #34D399 0%, #10B981 50%, #059669 100%);
  --gc-gradient-subtle: linear-gradient(135deg, rgba(52, 211, 153, 0.12) 0%, rgba(16, 185, 129, 0.12) 50%, rgba(5, 150, 105, 0.12) 100%);

  /* Light Canvas & Surfaces (Landing Match) */
  --bg-canvas: #F8F9FA;
  --bg-surface: rgba(255, 255, 255, 0.88);
  --bg-card: rgba(255, 255, 255, 0.94);
  --bg-card-hover: rgba(255, 255, 255, 1);
  --border-subtle: rgba(0, 0, 0, 0.08);
  --border-glass: rgba(0, 0, 0, 0.06);
  --text-main: #181528;
  --text-muted: #59546d;
  --text-dim: #8b85a3;
  --glass-blur: blur(20px);
  --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.03);

  /* Kinetic Timing Curves */
  --gc-ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --gc-ease-snappy: cubic-bezier(0.2, 0.9, 0.2, 1.0);
  --gc-ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1.0);
  --gc-ease-decel: cubic-bezier(0, 0, 0.2, 1.0);

  --apple-ease-smooth: var(--gc-ease-smooth);
  --apple-ease-snappy: var(--gc-ease-snappy);
  --apple-ease-decel: var(--gc-ease-decel);

  /* Light Theme Glass Materials & Elevation Tokens */
  --gc-glass-bg: rgba(255, 255, 255, 0.88);
  --gc-glass-nav-bg: rgba(255, 255, 255, 0.92);
  --gc-glass-heavy: rgba(255, 255, 255, 0.96);
  --gc-glass-medium: rgba(255, 255, 255, 0.85);
  --gc-glass-light: rgba(255, 255, 255, 0.70);
  --gc-glass-border: rgba(16, 185, 129, 0.12);
  --gc-glass-highlight: rgba(255, 255, 255, 0.95);

  --apple-glass-heavy: var(--gc-glass-heavy);
  --apple-glass-medium: var(--gc-glass-medium);
  --apple-glass-light: var(--gc-glass-light);
  --apple-glass-border: var(--gc-glass-border);
  --apple-glass-highlight: var(--gc-glass-highlight);

  /* Dimensional Shadow Scale */
  --gc-shadow-1: 0 2px 8px -2px rgba(0, 0, 0, 0.04), 0 1px 3px 0 rgba(0, 0, 0, 0.02);
  --gc-shadow-2: 0 6px 18px -4px rgba(16, 185, 129, 0.08), 0 2px 6px -1px rgba(0, 0, 0, 0.03);
  --gc-shadow-3: 0 14px 32px -8px rgba(16, 185, 129, 0.12), 0 4px 12px -2px rgba(0, 0, 0, 0.04);
  --gc-shadow-4: 0 24px 54px -12px rgba(16, 185, 129, 0.16), 0 8px 20px -4px rgba(0, 0, 0, 0.06);

  --apple-shadow-ambient: var(--gc-shadow-1);
  --apple-shadow-elevated: var(--gc-shadow-2);
  --apple-shadow-modal: var(--gc-shadow-3);
}

.dark-mode, :root[data-theme="dark"], body.dark-mode {
  /* Dark Canvas & Surfaces (Landing Match) */
  --bg-canvas: #030712;
  --bg-surface: rgba(17, 24, 39, 0.75);
  --bg-card: rgba(17, 24, 39, 0.65);
  --bg-card-hover: rgba(31, 41, 55, 0.85);
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-glass: rgba(255, 255, 255, 0.12);
  --text-main: #F9FAFB;
  --text-muted: #9CA3AF;
  --text-dim: #6B7280;
  --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.2);

  /* Dark Theme Glass Materials & Elevation Tokens */
  --gc-glass-bg: rgba(17, 24, 39, 0.75);
  --gc-glass-nav-bg: rgba(17, 24, 39, 0.88);
  --gc-glass-heavy: rgba(17, 24, 39, 0.95);
  --gc-glass-medium: rgba(17, 24, 39, 0.80);
  --gc-glass-light: rgba(31, 41, 55, 0.65);
  --gc-glass-border: rgba(255, 255, 255, 0.10);
  --gc-glass-highlight: rgba(255, 255, 255, 0.15);

  --apple-glass-heavy: var(--gc-glass-heavy);
  --apple-glass-medium: var(--gc-glass-medium);
  --apple-glass-light: var(--gc-glass-light);
  --apple-glass-border: var(--gc-glass-border);
  --apple-glass-highlight: var(--gc-glass-highlight);

  --gc-shadow-1: 0 2px 10px -2px rgba(0, 0, 0, 0.5), 0 1px 4px 0 rgba(0, 0, 0, 0.3);
  --gc-shadow-2: 0 8px 24px -6px rgba(0, 0, 0, 0.65), 0 2px 8px -1px rgba(16, 185, 129, 0.10);
  --gc-shadow-3: 0 20px 48px -10px rgba(0, 0, 0, 0.8), 0 6px 18px -3px rgba(16, 185, 129, 0.15);
  --gc-shadow-4: 0 32px 70px -16px rgba(0, 0, 0, 0.9), 0 12px 28px -6px rgba(16, 185, 129, 0.20);

  --apple-shadow-ambient: var(--gc-shadow-1);
  --apple-shadow-elevated: var(--gc-shadow-2);
  --apple-shadow-modal: var(--gc-shadow-3);
}

/* ═══════════ 2. ZERO-LATENCY TOUCH & FLUID RENDERING ═══════════ */
*, *::before, *::after {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* 1. Useful Place: Text typing boxes */
input,
input *,
textarea,
textarea *,
[contenteditable="true"],
[contenteditable="true"] *,
[contenteditable],
[contenteditable] *,
.chat-input-textarea,
.chat-input-textarea *,
.stager-caption-input,
.stager-caption-input *,
.comment-input,
.comment-input *,
.mockup-input-box,
.mockup-input-box *,
.studio-text-input,
.studio-text-input *,
#msgInput,
#commentInput,
#stagerCaption {
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important;
}

/* 2. Useful Place: Message bubbles & code snippets */
.msg,
.msg *,
.msg-sent,
.msg-sent *,
.msg-received,
.msg-received *,
.msg-text,
.msg-text *,
.msg-content,
.msg-content *,
.message-bubble,
.message-bubble *,
.chat-bubble,
.chat-bubble *,
.reply-bubble,
.reply-bubble *,
.bubble-incoming,
.bubble-incoming *,
.bubble-outgoing,
.bubble-outgoing *,
.mockup-chat-bubble,
.mockup-chat-bubble *,
.mockup-chat-bubble-received,
.mockup-chat-bubble-received *,
.mockup-chat-bubble-sent,
.mockup-chat-bubble-sent *,
.interactive-bubble,
.interactive-bubble *,
.pulse-text,
.pulse-text *,
.pulse-preview-text,
.pulse-preview-text *,
pre,
pre *,
code,
code * {
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important;
}

/* 3. Useful Place: Media captions & post content */
.msg-caption,
.msg-caption *,
.media-caption,
.media-caption *,
.caption-text,
.caption-text *,
.photo-caption,
.photo-caption *,
.post-caption,
.post-caption *,
.post-text,
.post-text *,
.pulse-card-caption,
.pulse-card-caption *,
figcaption,
figcaption * {
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important;
}

html, body {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-family: var(--gc-font-body);
}

/* Universal Instant Tap & Press Micro-Interactions */
.apple-pressable,
.gc-pressable,
button:not(.btn-send),
.action-btn,
.sidebar-header button,
.modal-btn,
.btn-primary,
.btn-secondary,
.btn-danger,
.theme-card,
.bubble-theme-card,
.stager-tool-btn,
.stager-color-swatch,
.forward-user-item,
.report-reason-item,
.tab-btn,
.bottom-nav-item {
  transition: transform 120ms var(--gc-ease-spring), opacity 120ms ease, background-color 0.15s ease, box-shadow 0.15s ease !important;
}

.apple-pressable:active,
.gc-pressable:active,
button:active:not(:disabled),
.action-btn:active:not(:disabled),
.sidebar-header button:active:not(:disabled),
.modal-btn:active:not(:disabled),
.btn-primary:active:not(:disabled),
.btn-secondary:active:not(:disabled),
.btn-danger:active:not(:disabled),
.theme-card:active,
.bubble-theme-card:active,
.stager-tool-btn:active,
.stager-color-swatch:active,
.forward-user-item:active,
.report-reason-item:active,
.tab-btn:active,
.bottom-nav-item:active {
  transform: scale(0.95) !important;
  opacity: 0.90 !important;
}

/* Grouped Lists & Row Press */
.user-item,
.settings-row,
.ctx-menu-item,
.blocked-user-item,
.starred-msg-item {
  transition: transform 120ms var(--gc-ease-spring), background-color 0.15s ease !important;
}

.user-item {
  height: 64px !important;
  max-height: 64px !important;
  min-height: 64px !important;
  overflow: hidden !important;
  contain: layout paint;
}

.user-item:active,
.settings-row:active,
.ctx-menu-item:active,
.blocked-user-item:active,
.starred-msg-item:active {
  transform: scale(0.985) !important;
}

/* ═══════════ 3. OPTICAL TYPOGRAPHY & TYPE SCALE ═══════════ */
.apple-display-lg, h1, .chat-title-main {
  font-family: var(--gc-font-display);
  letter-spacing: -0.025em;
  line-height: 1.15;
  font-weight: 700;
}

.apple-display-md, h2, .sidebar-header h2, .modal-title {
  font-family: var(--gc-font-display);
  letter-spacing: -0.018em;
  line-height: 1.25;
  font-weight: 700;
}

.apple-headline, h3, .user-name, .settings-card-title {
  font-family: var(--gc-font-display);
  letter-spacing: -0.012em;
  font-weight: 600;
}

.apple-body, p, .msg-text, .settings-desc {
  font-family: var(--gc-font-body);
  letter-spacing: -0.005em;
  line-height: 1.48;
}

.apple-caption, .user-time, .msg-time, .badge, .status-pill, .tagline {
  font-family: var(--gc-font-body);
  letter-spacing: 0.015em;
  font-weight: 500;
}

/* ═══════════ 4. FROSTED GLASS SURFACES (GLASSMORPHISM) ═══════════ */
.glass-header,
.apple-glass-heavy {
  background: var(--gc-glass-heavy) !important;
  backdrop-filter: blur(24px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(190%) !important;
  border-bottom: 1px solid var(--gc-glass-border) !important;
  box-shadow: var(--gc-shadow-1) !important;
}

.glass-nav,
.bottom-nav,
.tab-bar,
.apple-glass-medium {
  background: var(--gc-glass-nav-bg) !important;
  backdrop-filter: blur(24px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(190%) !important;
  border-top: 1px solid var(--gc-glass-border) !important;
  box-shadow: var(--gc-shadow-2) !important;
}

.glass-composer,
.chat-input-bar,
#input-bar {
  background: var(--gc-glass-bg) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border: 1px solid var(--gc-glass-border) !important;
  border-radius: 28px !important;
  box-shadow: var(--gc-shadow-2) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.glass-composer:focus-within,
.chat-input-bar:focus-within,
#input-bar:focus-within {
  border-color: rgba(124, 58, 237, 0.45) !important;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15), var(--gc-shadow-3) !important;
}

.glass-card,
.settings-card {
  background: var(--gc-glass-bg) !important;
  backdrop-filter: blur(16px) saturate(170%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(170%) !important;
  border: 1px solid var(--gc-glass-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--gc-shadow-1) !important;
}

.glass-modal,
.glass-dialog,
.modal-content,
.custom-confirm-modal,
#meet-radar-modal > div {
  background: var(--gc-glass-heavy) !important;
  backdrop-filter: blur(28px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(200%) !important;
  border: 1px solid var(--gc-glass-border) !important;
  border-radius: 20px !important;
  box-shadow: var(--gc-shadow-4) !important;
}

/* ═══════════ 5. KINETIC ANIMATIONS & TRANSITIONS ═══════════ */
/* Modals Materialize with Smooth Scale + Fade */
.modal, .custom-confirm-modal, #meet-radar-modal > div, .context-menu {
  animation: gcModalMaterialize 0.22s var(--gc-ease-spring) forwards;
  transform-origin: center center;
  will-change: transform, opacity;
}

@keyframes gcModalMaterialize {
  0% {
    opacity: 0;
    transform: scale(0.93) translateY(8px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Message Bubble Entrance Animation (Snappy, 180ms) */
@keyframes gcBubbleSlideIn {
  0% {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.msg-bubble-enter {
  animation: gcBubbleSlideIn 0.18s var(--gc-ease-spring) forwards;
  will-change: transform, opacity;
}

/* Bottom Nav Tab Switch Kinetic Spring */
.tab-btn.active,
.bottom-nav-item.active {
  animation: gcTabActivate 0.2s var(--gc-ease-spring) forwards;
}

@keyframes gcTabActivate {
  0% { transform: scale(0.92); }
  50% { transform: scale(1.06); }
  100% { transform: scale(1.0); }
}

/* Bottom Sheets & Drawers */
@media (max-width: 768px) {
  .sidebar {
    transition: transform 0.28s var(--gc-ease-spring), opacity 0.28s ease !important;
  }
}

/* ═══════════ 6. ACCESSIBILITY OVERRIDES ═══════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
    transform: none !important;
  }
  .modal, .custom-confirm-modal, #meet-radar-modal > div, .context-menu, .msg-bubble-enter {
    animation: none !important;
    transition: opacity 0.15s ease !important;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .glass-header,
  .glass-nav,
  .glass-composer,
  .glass-card,
  .glass-modal,
  .apple-glass-heavy,
  .apple-glass-medium,
  .apple-glass-light,
  .chat-input-bar,
  #input-bar,
  .bottom-search-bar,
  .sidebar {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: #0B141A !important;
  }
  :root:not(.dark-mode) .glass-header,
  :root:not(.dark-mode) .glass-nav,
  :root:not(.dark-mode) .glass-composer,
  :root:not(.dark-mode) .glass-card,
  :root:not(.dark-mode) .glass-modal,
  :root:not(.dark-mode) .apple-glass-heavy,
  :root:not(.dark-mode) .apple-glass-medium,
  :root:not(.dark-mode) .apple-glass-light,
  :root:not(.dark-mode) .chat-input-bar,
  :root:not(.dark-mode) #input-bar,
  :root:not(.dark-mode) .bottom-search-bar,
  :root:not(.dark-mode) .sidebar {
    background: #FFFFFF !important;
  }
}

/* ═══════════ 7. REACT-BITS & VUE-BITS MODERN DESIGN SYSTEM ═══════════
   Shimmer sweeps, spotlight cards, glow buttons, bento glass, spring popups
   (Strictly without magnet physics)
   ══════════════════════════════════════════════════════════════════════ */

/* 1. Shiny Text Effect */
@keyframes rb-shiny-text {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.shiny-text {
  background: linear-gradient(
    110deg,
    rgba(255, 255, 255, 0.7) 20%,
    rgba(255, 255, 255, 1) 40%,
    #ffffff 50%,
    rgba(255, 255, 255, 1) 60%,
    rgba(255, 255, 255, 0.7) 80%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  animation: rb-shiny-text 3.5s linear infinite;
}

.shiny-text-gold {
  background: linear-gradient(
    110deg,
    #F59E0B 20%,
    #FDE68A 45%,
    #FFFFFF 50%,
    #FDE68A 55%,
    #D97706 80%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  animation: rb-shiny-text 3.2s linear infinite;
}

.shiny-text-amethyst,
.shiny-text-teal {
  background: linear-gradient(
    110deg,
    #34D399 20%,
    #A7F3D0 45%,
    #FFFFFF 50%,
    #A7F3D0 55%,
    #10B981 80%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  animation: rb-shiny-text 3.2s linear infinite;
}

/* 2. Modern React-Bits Buttons (No Magnet) */
.rb-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 600;
  border-radius: 9999px;
  padding: 12px 26px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 0.16s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease, background 0.2s ease, filter 0.2s ease;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  text-decoration: none !important;
}

.rb-btn:hover {
  transform: translateY(-2px);
}

.rb-btn:active {
  transform: scale(0.96) !important;
}

.rb-btn-primary {
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
  color: #ffffff !important;
  box-shadow: 0 4px 18px rgba(16, 185, 129, 0.38);
}

.rb-btn-primary:hover {
  box-shadow: 0 8px 26px rgba(16, 185, 129, 0.55);
  filter: brightness(1.06);
}

.rb-btn-vip {
  background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
  color: #0b0e14 !important;
  font-weight: 700;
  box-shadow: 0 4px 18px rgba(245, 158, 11, 0.38);
}

.rb-btn-vip:hover {
  box-shadow: 0 8px 28px rgba(245, 158, 11, 0.6);
  filter: brightness(1.06);
}

.rb-btn-outline {
  background: rgba(255, 255, 255, 0.05);
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.rb-btn-outline:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 18px rgba(255, 255, 255, 0.08);
}

/* Shimmer Light Sweep on Buttons */
.rb-shimmer {
  position: relative;
  overflow: hidden;
}

.rb-shimmer::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -120%;
  width: 60%;
  height: 200%;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.35) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: rotate(25deg);
  animation: rb-shimmer-pass 3.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  pointer-events: none;
}

@keyframes rb-shimmer-pass {
  0% { left: -120%; }
  35% { left: 180%; }
  100% { left: 180%; }
}

/* 3. Spotlight Cards & Bento Surfaces */
.rb-card-spotlight {
  position: relative;
  border-radius: 22px;
  background: rgba(17, 24, 39, 0.75);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.03);
  overflow: hidden;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.rb-card-spotlight:hover {
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: 0 18px 45px -12px rgba(0, 0, 0, 0.75), 0 0 28px rgba(124, 58, 237, 0.22);
  transform: translateY(-3px);
}

.rb-card-spotlight::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.28), transparent);
  pointer-events: none;
}

.rb-card-gold {
  border-color: rgba(245, 158, 11, 0.35) !important;
  box-shadow: 0 12px 35px -10px rgba(245, 158, 11, 0.2), 0 0 0 1px rgba(245, 158, 11, 0.2) !important;
}

.rb-card-gold:hover {
  border-color: rgba(245, 158, 11, 0.6) !important;
  box-shadow: 0 18px 45px -10px rgba(245, 158, 11, 0.35), 0 0 30px rgba(245, 158, 11, 0.25) !important;
}

.rb-card-gold::before {
  background: linear-gradient(90deg, transparent, rgba(245, 158, 11, 0.6), transparent) !important;
}

/* 4. Elegant Hairline Section Separators */
.rb-separator {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 32px 0 20px;
  width: 100%;
}

.rb-separator::before,
.rb-separator::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.14), transparent);
}

.rb-separator-badge {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 5px 14px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.7);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* 5. Breathing Pulse Badge */
.rb-badge-pulse {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.rb-badge-pulse::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 8px #10B981;
  animation: rb-pulse-glow 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes rb-pulse-glow {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

/* 6. Spring Modals & Popups */
@keyframes rb-modal-spring {
  0% {
    opacity: 0;
    transform: scale(0.92) translateY(12px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.rb-modal-container {
  animation: rb-modal-spring 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  will-change: transform, opacity;
}

/* ═══════════ 8. UNIVERSAL BUTTON & COMPONENT ENHANCEMENTS ═══════════ */
.btn-primary,
.btn.btn-primary,
button.btn-primary,
a.btn-primary {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #10B981 0%, #059669 100%) !important;
  color: #ffffff !important;
  border-radius: 9999px !important;
  font-weight: 700 !important;
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.22s ease, filter 0.2s ease !important;
  box-shadow: 0 4px 18px rgba(16, 185, 129, 0.38) !important;
}

.btn-primary:hover,
.btn.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 26px rgba(16, 185, 129, 0.55) !important;
  filter: brightness(1.06);
}

.btn-primary:active,
.btn.btn-primary:active {
  transform: scale(0.96) !important;
}

.btn-secondary,
.btn.btn-secondary,
button.btn-secondary,
a.btn-secondary {
  border-radius: 9999px !important;
  font-weight: 600 !important;
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.2s ease, border-color 0.2s ease !important;
}

.btn-secondary:hover,
.btn.btn-secondary:hover {
  transform: translateY(-2px);
}

.btn-secondary:active,
.btn.btn-secondary:active {
  transform: scale(0.96) !important;
}

/* Shimmer Light Sweeping Effect on All Primary & VIP Buttons */
.btn-primary::after,
.btn-cta-gold::after,
.btn-vip::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -120%;
  width: 60%;
  height: 200%;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.32) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: rotate(25deg);
  animation: rb-shimmer-pass 3.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  pointer-events: none;
}

/* Bento Cards & Spotlight Hover Highlights */
.bento-card,
.spotlight-card,
.feature-card,
.pricing-card {
  position: relative;
  border-radius: 22px !important;
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease, border-color 0.25s ease !important;
}

.bento-card:hover,
.spotlight-card:hover,
.feature-card:hover,
.pricing-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.65), 0 0 24px rgba(124, 58, 237, 0.20) !important;
}

/* Modals & Dialogs Spring Materialization */
.modal-content,
.modal-card,
.cropper-card,
.custom-confirm-modal,
.bottom-sheet-content,
.dialog-box {
  border-radius: 26px !important;
  animation: rb-modal-spring 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) forwards !important;
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(167, 139, 250, 0.16) !important;
}

/* ═══════════ 9. AMETHYST GLASS SCROLLBARS ═══════════ */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(124, 58, 237, 0.25);
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(124, 58, 237, 0.55);
}

/* ═══════════ 10. MATERIAL SYMBOLS & NAVIGATION RAIL ICONS ═══════════ */
.material-symbols-rounded {
  font-family: 'Material Symbols Rounded', sans-serif;
  font-weight: normal;
  font-style: normal;
  font-size: 22px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  vertical-align: middle;
  font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
}
.material-symbols-rounded.icon-fill, .icon-fill {
  font-variation-settings: 'FILL' 1, 'wght' 600, 'GRAD' 0, 'opsz' 24;
}

/* Nav Rail Theme Icon Transitions */
#railThemeIcon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}
.dark-mode #railThemeIcon .rail-theme-moon,
[data-theme="dark"] #railThemeIcon .rail-theme-moon {
  display: none !important;
}
.dark-mode #railThemeIcon .rail-theme-sun,
[data-theme="dark"] #railThemeIcon .rail-theme-sun {
  display: inline-block !important;
}
html:not(.dark-mode):not([data-theme="dark"]) #railThemeIcon .rail-theme-moon {
  display: inline-block !important;
}
html:not(.dark-mode):not([data-theme="dark"]) #railThemeIcon .rail-theme-sun {
  display: none !important;
}

/* ==========================================================================
   GLOBAL COPY RESTRICTION & TARGETED SELECTION ALLOWLIST
   Restricts selecting and copying text across all general UI surfaces.
   Permits selection and copying ONLY in useful functional areas:
   1. Text typing boxes (inputs, textareas, contenteditable)
   2. Message bubbles (sent/received chats, AI responses, code blocks)
   3. Media captions (post captions, photo captions, stager captions)
   ========================================================================== */
*, *::before, *::after {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* 1. Text typing boxes */
input,
input *,
textarea,
textarea *,
[contenteditable="true"],
[contenteditable="true"] *,
[contenteditable=""],
[contenteditable],
.typing-box,
.typing-box *,
.chat-input,
.chat-input *,
.chat-input-text,
.message-input,
.stager-caption-input,
.comment-input,
.comment-input-field,
.search-input,
.mockup-input-box,
.studio-text-input {
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important;
}

/* 2. Message bubbles & code snippets */
.msg,
.msg *,
.msg-sent,
.msg-sent *,
.msg-received,
.msg-received *,
.msg-text,
.msg-text *,
.msg-content,
.msg-content *,
.msg-body,
.msg-body *,
.message-bubble,
.message-bubble *,
.chat-bubble,
.chat-bubble *,
.reply-bubble,
.reply-bubble *,
.reply-bubble-text,
.mockup-chat-bubble,
.mockup-chat-bubble *,
.mockup-chat-bubble-received,
.mockup-chat-bubble-received *,
.mockup-chat-bubble-sent,
.mockup-chat-bubble-sent *,
.interactive-bubble,
.interactive-bubble *,
.game-banter-bubble,
.game-banter-bubble *,
.ai-response-bubble,
.ai-response-bubble *,
.bubble-text,
.bubble-text *,
.bubble-content,
.bubble-content *,
.selectable-message,
.pulse-text,
.pulse-preview-text,
pre,
pre *,
code,
code *,
.code-block,
.code-block *,
.code-inline {
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important;
}

/* 3. Media captions & post content */
.msg-caption,
.msg-caption *,
.media-caption,
.media-caption *,
.caption-text,
.caption-text *,
.photo-caption,
.photo-caption *,
.album-caption,
.album-caption *,
.post-caption,
.post-caption *,
.post-text,
.post-text *,
.feed-post-content,
.feed-post-content *,
.comment-text,
.comment-text *,
.comment-body,
.comment-body *,
.pulse-card-caption,
.status-caption,
.selectable-caption,
figcaption,
figcaption * {
  -webkit-user-select: text !important;
  -moz-user-select: text !important;
  -ms-user-select: text !important;
  user-select: text !important;
}

/* ═══════════════════════════════════════════════════════════════════
   FULL-SPECTRUM VIP PASTEL THEMES (100% BLACK FONT CONTRAST)
   Navbar, buttons, searchbar, sent bubbles, active tabs, FABs
   ═══════════════════════════════════════════════════════════════════ */

/* 1. PASTEL MINT (#d6fcc5) */
:root[data-vip-theme="mint"], [data-vip-theme="mint"] {
  --gc-primary: #d6fcc5 !important;
  --gc-primary-hover: #c4f5b0 !important;
  --gc-primary-glow: rgba(214, 252, 197, 0.55) !important;
  --gc-accent: #b5e8a0 !important;
  --brand-primary: #d6fcc5 !important;
  --vip-theme-fill: #d6fcc5 !important;
  --vip-theme-border: #b5e8a0 !important;
  --vip-theme-text: #000000 !important;
  --vip-theme-meta: #1f2937 !important;
}

/* 2. PASTEL LAVENDER (#ddc2ff) */
:root[data-vip-theme="lavender"], [data-vip-theme="lavender"] {
  --gc-primary: #ddc2ff !important;
  --gc-primary-hover: #d0afff !important;
  --gc-primary-glow: rgba(221, 194, 255, 0.55) !important;
  --gc-accent: #c6a3f5 !important;
  --brand-primary: #ddc2ff !important;
  --vip-theme-fill: #ddc2ff !important;
  --vip-theme-border: #c6a3f5 !important;
  --vip-theme-text: #000000 !important;
  --vip-theme-meta: #1f2937 !important;
}

/* 3. SOFT PERIWINKLE (#acb3e8) */
:root[data-vip-theme="periwinkle"], [data-vip-theme="periwinkle"] {
  --gc-primary: #acb3e8 !important;
  --gc-primary-hover: #9ca4e0 !important;
  --gc-primary-glow: rgba(172, 179, 232, 0.55) !important;
  --gc-accent: #8f98d6 !important;
  --brand-primary: #acb3e8 !important;
  --vip-theme-fill: #acb3e8 !important;
  --vip-theme-border: #8f98d6 !important;
  --vip-theme-text: #000000 !important;
  --vip-theme-meta: #1f2937 !important;
}

/* 4. PASTEL ROSE (#fcd2eb) */
:root[data-vip-theme="rose"], [data-vip-theme="rose"] {
  --gc-primary: #fcd2eb !important;
  --gc-primary-hover: #f7bfdf !important;
  --gc-primary-glow: rgba(252, 210, 235, 0.55) !important;
  --gc-accent: #ebb0d3 !important;
  --brand-primary: #fcd2eb !important;
  --vip-theme-fill: #fcd2eb !important;
  --vip-theme-border: #ebb0d3 !important;
  --vip-theme-text: #000000 !important;
  --vip-theme-meta: #1f2937 !important;
}

/* 5. BUTTER CREAM (#e8e2ae) */
:root[data-vip-theme="butter"], [data-vip-theme="butter"] {
  --gc-primary: #e8e2ae !important;
  --gc-primary-hover: #ded699 !important;
  --gc-primary-glow: rgba(232, 226, 174, 0.55) !important;
  --gc-accent: #d4cd92 !important;
  --brand-primary: #e8e2ae !important;
  --vip-theme-fill: #e8e2ae !important;
  --vip-theme-border: #d4cd92 !important;
  --vip-theme-text: #000000 !important;
  --vip-theme-meta: #1f2937 !important;
}

/* FULL-SPECTRUM COMPONENT MAPPINGS */
[data-vip-theme="mint"] .msg-sent,
[data-vip-theme="lavender"] .msg-sent,
[data-vip-theme="periwinkle"] .msg-sent,
[data-vip-theme="rose"] .msg-sent,
[data-vip-theme="butter"] .msg-sent,
[data-vip-theme="mint"] .message-bubble.sent,
[data-vip-theme="lavender"] .message-bubble.sent,
[data-vip-theme="periwinkle"] .message-bubble.sent,
[data-vip-theme="rose"] .message-bubble.sent,
[data-vip-theme="butter"] .message-bubble.sent,
[data-vip-theme="mint"] .mock-bubble-outgoing,
[data-vip-theme="lavender"] .mock-bubble-outgoing,
[data-vip-theme="periwinkle"] .mock-bubble-outgoing,
[data-vip-theme="rose"] .mock-bubble-outgoing,
[data-vip-theme="butter"] .mock-bubble-outgoing {
  background: var(--vip-theme-fill) !important;
  border: 1px solid var(--vip-theme-border) !important;
  color: #000000 !important;
  font-weight: 500 !important;
}

[data-vip-theme="mint"] .msg-sent *,
[data-vip-theme="lavender"] .msg-sent *,
[data-vip-theme="periwinkle"] .msg-sent *,
[data-vip-theme="rose"] .msg-sent *,
[data-vip-theme="butter"] .msg-sent *,
[data-vip-theme="mint"] .mock-bubble-outgoing *,
[data-vip-theme="lavender"] .mock-bubble-outgoing *,
[data-vip-theme="periwinkle"] .mock-bubble-outgoing *,
[data-vip-theme="rose"] .mock-bubble-outgoing *,
[data-vip-theme="butter"] .mock-bubble-outgoing * {
  color: #000000 !important;
}

[data-vip-theme="mint"] .msg-sent .msg-time,
[data-vip-theme="lavender"] .msg-sent .msg-time,
[data-vip-theme="periwinkle"] .msg-sent .msg-time,
[data-vip-theme="rose"] .msg-sent .msg-time,
[data-vip-theme="butter"] .msg-sent .msg-time,
[data-vip-theme="mint"] .msg-sent .msg-ticks,
[data-vip-theme="lavender"] .msg-sent .msg-ticks,
[data-vip-theme="periwinkle"] .msg-sent .msg-ticks,
[data-vip-theme="rose"] .msg-sent .msg-ticks,
[data-vip-theme="butter"] .msg-sent .msg-ticks {
  color: #1f2937 !important;
  opacity: 0.9 !important;
}

/* Action Buttons & Send Buttons */
[data-vip-theme="mint"] .btn-action-primary,
[data-vip-theme="lavender"] .btn-action-primary,
[data-vip-theme="periwinkle"] .btn-action-primary,
[data-vip-theme="rose"] .btn-action-primary,
[data-vip-theme="butter"] .btn-action-primary,
[data-vip-theme="mint"] .send-btn,
[data-vip-theme="lavender"] .send-btn,
[data-vip-theme="periwinkle"] .send-btn,
[data-vip-theme="rose"] .send-btn,
[data-vip-theme="butter"] .send-btn,
[data-vip-theme="mint"] #sendBtn,
[data-vip-theme="lavender"] #sendBtn,
[data-vip-theme="periwinkle"] #sendBtn,
[data-vip-theme="rose"] #sendBtn,
[data-vip-theme="butter"] #sendBtn,
[data-vip-theme="mint"] .chat-send-btn,
[data-vip-theme="lavender"] .chat-send-btn,
[data-vip-theme="periwinkle"] .chat-send-btn,
[data-vip-theme="rose"] .chat-send-btn,
[data-vip-theme="butter"] .chat-send-btn,
[data-vip-theme="mint"] .nav-pill-cta,
[data-vip-theme="lavender"] .nav-pill-cta,
[data-vip-theme="periwinkle"] .nav-pill-cta,
[data-vip-theme="rose"] .nav-pill-cta,
[data-vip-theme="butter"] .nav-pill-cta {
  background: var(--vip-theme-fill) !important;
  color: #000000 !important;
  border: 1px solid var(--vip-theme-border) !important;
  box-shadow: 0 4px 16px var(--gc-primary-glow) !important;
  font-weight: 700 !important;
}

[data-vip-theme="mint"] .btn-action-primary *,
[data-vip-theme="lavender"] .btn-action-primary *,
[data-vip-theme="periwinkle"] .btn-action-primary *,
[data-vip-theme="rose"] .btn-action-primary *,
[data-vip-theme="butter"] .btn-action-primary *,
[data-vip-theme="mint"] .send-btn *,
[data-vip-theme="lavender"] .send-btn *,
[data-vip-theme="periwinkle"] .send-btn *,
[data-vip-theme="rose"] .send-btn *,
[data-vip-theme="butter"] .send-btn *,
[data-vip-theme="mint"] #sendBtn *,
[data-vip-theme="lavender"] #sendBtn *,
[data-vip-theme="periwinkle"] #sendBtn *,
[data-vip-theme="rose"] #sendBtn *,
[data-vip-theme="butter"] #sendBtn *,
[data-vip-theme="mint"] .chat-send-btn *,
[data-vip-theme="lavender"] .chat-send-btn *,
[data-vip-theme="periwinkle"] .chat-send-btn *,
[data-vip-theme="rose"] .chat-send-btn *,
[data-vip-theme="butter"] .chat-send-btn *,
[data-vip-theme="mint"] .nav-pill-cta *,
[data-vip-theme="lavender"] .nav-pill-cta *,
[data-vip-theme="periwinkle"] .nav-pill-cta *,
[data-vip-theme="rose"] .nav-pill-cta *,
[data-vip-theme="butter"] .nav-pill-cta * {
  color: #000000 !important;
  stroke: #000000 !important;
}

/* Navbar & Active Navigation Links */
[data-vip-theme="mint"] .site-nav-bar,
[data-vip-theme="lavender"] .site-nav-bar,
[data-vip-theme="periwinkle"] .site-nav-bar,
[data-vip-theme="rose"] .site-nav-bar,
[data-vip-theme="butter"] .site-nav-bar,
[data-vip-theme="mint"] .chat-top-bar,
[data-vip-theme="lavender"] .chat-top-bar,
[data-vip-theme="periwinkle"] .chat-top-bar,
[data-vip-theme="rose"] .chat-top-bar,
[data-vip-theme="butter"] .chat-top-bar {
  border-color: var(--vip-theme-border) !important;
}

[data-vip-theme="mint"] .nav-shiny-top-line,
[data-vip-theme="lavender"] .nav-shiny-top-line,
[data-vip-theme="periwinkle"] .nav-shiny-top-line,
[data-vip-theme="rose"] .nav-shiny-top-line,
[data-vip-theme="butter"] .nav-shiny-top-line {
  background: radial-gradient(350px circle at var(--mouse-x, 50%) 0px, var(--vip-theme-fill), transparent 75%) !important;
}

[data-vip-theme="mint"] .nav-gliding-pill,
[data-vip-theme="lavender"] .nav-gliding-pill,
[data-vip-theme="periwinkle"] .nav-gliding-pill,
[data-vip-theme="rose"] .nav-gliding-pill,
[data-vip-theme="butter"] .nav-gliding-pill {
  background: var(--vip-theme-fill) !important;
}

[data-vip-theme="mint"] .rail-nav-item.active,
[data-vip-theme="lavender"] .rail-nav-item.active,
[data-vip-theme="periwinkle"] .rail-nav-item.active,
[data-vip-theme="rose"] .rail-nav-item.active,
[data-vip-theme="butter"] .rail-nav-item.active,
[data-vip-theme="mint"] .nav-rail-item.active,
[data-vip-theme="lavender"] .nav-rail-item.active,
[data-vip-theme="periwinkle"] .nav-rail-item.active,
[data-vip-theme="rose"] .nav-rail-item.active,
[data-vip-theme="butter"] .nav-rail-item.active {
  background: var(--vip-theme-fill) !important;
  color: #000000 !important;
}

[data-vip-theme="mint"] .rail-nav-item.active *,
[data-vip-theme="lavender"] .rail-nav-item.active *,
[data-vip-theme="periwinkle"] .rail-nav-item.active *,
[data-vip-theme="rose"] .rail-nav-item.active *,
[data-vip-theme="butter"] .rail-nav-item.active *,
[data-vip-theme="mint"] .nav-rail-item.active *,
[data-vip-theme="lavender"] .nav-rail-item.active *,
[data-vip-theme="periwinkle"] .nav-rail-item.active *,
[data-vip-theme="rose"] .nav-rail-item.active *,
[data-vip-theme="butter"] .nav-rail-item.active * {
  color: #000000 !important;
  stroke: #000000 !important;
}

/* Search Bars & Input Focus */
[data-vip-theme="mint"] .search-bar:focus-within,
[data-vip-theme="lavender"] .search-bar:focus-within,
[data-vip-theme="periwinkle"] .search-bar:focus-within,
[data-vip-theme="rose"] .search-bar:focus-within,
[data-vip-theme="butter"] .search-bar:focus-within,
[data-vip-theme="mint"] .chat-search-pill:focus-within,
[data-vip-theme="lavender"] .chat-search-pill:focus-within,
[data-vip-theme="periwinkle"] .chat-search-pill:focus-within,
[data-vip-theme="rose"] .chat-search-pill:focus-within,
[data-vip-theme="butter"] .chat-search-pill:focus-within {
  border-color: var(--vip-theme-border) !important;
  box-shadow: 0 0 0 3px var(--gc-primary-glow) !important;
}

/* VIP Shimmering Animated Name Glow */
.vip-name-glow {
  background: linear-gradient(135deg, #FFD700 0%, #FF6584 25%, #6C5CE7 50%, #00F2FE 75%, #4FACFE 100%);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: vipShimmerGradient 4s ease infinite;
  font-weight: 800 !important;
  display: inline-block;
  filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.4));
  letter-spacing: -0.01em;
}

@keyframes vipShimmerGradient {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* VIP Custom Title Pill Badge */
.vip-custom-title-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.18), rgba(236, 72, 153, 0.18));
  border: 1px solid rgba(245, 158, 11, 0.45);
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  color: #f59e0b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  vertical-align: middle;
  margin-left: 5px;
  box-shadow: 0 1px 4px rgba(245, 158, 11, 0.2);
}

.dark-mode .vip-custom-title-badge {
  color: #fbbf24;
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.25), rgba(236, 72, 153, 0.25));
  border-color: rgba(245, 158, 11, 0.55);
}

/* ═══════════════════════════════════════════════════════════════════
   15. IPHONE & MOBILE BROWSER OPTIMIZATION (ANTI-ZOOM & NATIVE TOUCH)
   ═══════════════════════════════════════════════════════════════════ */

/* A. STRICT ANTI-ZOOM RULE: Enforce 16px minimum on mobile/touch inputs to stop iOS Safari auto-zoom */
@media screen and (max-width: 768px), screen and (pointer: coarse) {
  input,
  textarea,
  select,
  [contenteditable="true"],
  .chat-input-textarea,
  #msgInput,
  #search-input,
  #stager-caption-input,
  #commentInput,
  .comment-input,
  .stager-caption-input,
  .search-input,
  .form-control,
  .text-input {
    font-size: 16px !important;
    font-size: max(16px, 1rem) !important;
    line-height: 1.4 !important;
  }
}

/* B. ZERO-DELAY TOUCH & ELIMINATE DOUBLE-TAP ZOOM */
html,
body,
button,
a,
input,
select,
textarea,
.action-btn,
.tab-btn,
.mode-tab,
.bottom-nav-item,
.pill,
.chats-pill,
.ratio-btn,
.btn-crop-tool,
.btn-crop-apply,
.btn-crop-cancel {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* C. DYNAMIC VIEWPORT & SAFE AREA PADDING SYSTEM */
:root {
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --app-height: 100dvh;
}

@supports not (height: 100dvh) {
  :root {
    --app-height: 100vh;
  }
}

html, body {
  min-height: var(--app-height, 100vh);
  height: var(--app-height, 100vh);
  overflow-x: hidden;
}

.app-container,
.fullscreen-media-stager,
.story-viewer-backdrop {
  height: var(--app-height, 100vh) !important;
  max-height: var(--app-height, 100vh) !important;
}

/* Safe Area Insets for Mobile Headers & Bottom Toolbars */
@media screen and (max-width: 768px) {
  .chat-header,
  .sidebar-header,
  .main-header,
  .feed-header,
  .pulse-header,
  .stager-top-bar {
    padding-top: max(10px, env(safe-area-inset-top, 10px)) !important;
    height: auto !important;
    min-height: calc(54px + env(safe-area-inset-top, 0px)) !important;
  }

  .chat-input-bar,
  .glass-composer,
  #input-bar,
  .bottom-nav,
  .stager-bottom-bar {
    padding-bottom: max(12px, env(safe-area-inset-bottom, 12px)) !important;
  }

  .sidebar {
    padding-bottom: max(8px, env(safe-area-inset-bottom, 8px));
  }

  /* Apple Human Interface Guidelines: Minimum 44x44px touch targets */
  .action-btn,
  .stager-icon-btn,
  .btn-icon,
  .close-btn,
  .btn-close-modal,
  .btn-crop-close,
  .header-actions button,
  .mobile-back-btn {
    min-width: 44px !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Micro-Haptic Spring Feedback on Tap */
  button:active,
  .action-btn:active,
  .mode-tab:active,
  .bottom-nav-item:active,
  .ratio-btn:active,
  .btn-crop-tool:active,
  .stager-icon-btn:active,
  .stager-send-btn:active {
    transform: scale(0.95) !important;
    opacity: 0.88 !important;
    transition: transform 90ms var(--gc-ease-spring), opacity 90ms ease !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   16. UNIVERSAL HIGH-PERFORMANCE IMAGE CROPPER & PREVIEW SCREEN
   ═══════════════════════════════════════════════════════════════════ */
.cropper-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.90);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  display: none;
  align-items: center;
  justify-content: center;
  padding: max(14px, env(safe-area-inset-top, 14px)) max(14px, env(safe-area-inset-right, 14px)) max(14px, env(safe-area-inset-bottom, 14px)) max(14px, env(safe-area-inset-left, 14px));
  z-index: 999999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s var(--gc-ease-smooth);
}

.cropper-modal-overlay.active {
  display: flex !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.cropper-card {
  background: var(--panel-solid, #181528);
  border: 1px solid var(--gc-glass-border, rgba(124, 58, 237, 0.18));
  border-radius: 24px;
  max-width: 580px;
  width: 100%;
  padding: 18px 20px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.65);
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: calc(var(--app-height, 100vh) - 28px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  animation: cropperPop 0.28s cubic-bezier(0.175, 0.885, 0.32, 1.15);
}

@keyframes cropperPop {
  0% { transform: scale(0.92); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

.cropper-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line, rgba(255, 255, 255, 0.1));
  padding-bottom: 8px;
}

.cropper-title {
  font-family: var(--gc-font-display);
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--ink, #ffffff);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.btn-crop-close {
  background: rgba(255, 255, 255, 0.1);
  border: none;
  color: var(--ink, #ffffff);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}

.btn-crop-close:hover {
  background: rgba(255, 255, 255, 0.22);
}

.ratio-selector-container {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding: 2px 0;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.ratio-selector-container::-webkit-scrollbar { display: none; }

.ratio-btn {
  padding: 6px 14px;
  border-radius: 9999px;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.15));
  background: var(--surface-1, rgba(255, 255, 255, 0.08));
  color: var(--ink-soft, #cbd5e1);
  font-family: var(--gc-font-body);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.ratio-btn:hover {
  color: #ffffff;
  border-color: var(--gc-primary, #10B981);
}

.ratio-btn.active {
  background: var(--gc-primary, #10B981) !important;
  color: #ffffff !important;
  border-color: var(--gc-primary, #10B981) !important;
  box-shadow: 0 2px 10px rgba(16, 185, 129, 0.4);
}

.cropper-stage-wrap {
  position: relative;
  width: 100%;
  height: clamp(240px, 42vh, 380px);
  background: #09090b;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  user-select: none;
  touch-action: none;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.cropper-stage-wrap:active {
  cursor: grabbing;
}

#gc-crop-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.crop-frame-guide {
  position: absolute;
  border: 2px solid #ffffff;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.65);
  pointer-events: none;
  border-radius: 4px;
  transition: width 0.15s var(--gc-ease-smooth), height 0.15s var(--gc-ease-smooth), left 0.15s var(--gc-ease-smooth), top 0.15s var(--gc-ease-smooth);
}

.crop-grid-line-h1, .crop-grid-line-h2 {
  position: absolute;
  left: 0; right: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.35);
}
.crop-grid-line-h1 { top: 33.33%; }
.crop-grid-line-h2 { top: 66.66%; }

.crop-grid-line-v1, .crop-grid-line-v2 {
  position: absolute;
  top: 0; bottom: 0;
  width: 1px;
  background: rgba(255, 255, 255, 0.35);
}
.crop-grid-line-v1 { left: 33.33%; }
.crop-grid-line-v2 { left: 66.66%; }

.cropper-controls-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.zoom-slider-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 140px;
}

.zoom-slider-wrap span {
  font-family: var(--gc-font-body);
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--ink-soft, #94a3b8);
}

.zoom-slider {
  flex: 1;
  accent-color: var(--gc-primary, #10B981);
  cursor: pointer;
  height: 6px;
  border-radius: 3px;
}

.btn-crop-tool {
  background: var(--surface-1, rgba(255, 255, 255, 0.08));
  border: 1px solid var(--line, rgba(255, 255, 255, 0.15));
  color: var(--ink, #ffffff);
  padding: 7px 12px;
  border-radius: 12px;
  font-family: var(--gc-font-body);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s ease;
}

.btn-crop-tool:hover {
  border-color: var(--gc-primary, #10B981);
  color: var(--gc-primary, #10B981);
}

.cropper-actions-row {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}

.btn-crop-cancel {
  flex: 1;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid var(--line, rgba(255, 255, 255, 0.15));
  background: var(--surface-1, rgba(255, 255, 255, 0.08));
  color: var(--ink, #ffffff);
  font-family: var(--gc-font-body);
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease;
}

.btn-crop-cancel:hover {
  background: rgba(255, 255, 255, 0.16);
}

.btn-crop-apply {
  flex: 1.4;
  padding: 12px;
  border-radius: 14px;
  border: none;
  background: var(--gc-gradient-primary, linear-gradient(135deg, #10B981 0%, #059669 100%));
  color: #ffffff;
  font-family: var(--gc-font-body);
  font-size: 0.88rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.4);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-crop-apply:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.5);
}

/* ═══════════════════════════════════════════════════════════════════
   17. DESKTOP WORKSPACE PERFECTION & LARGE DISPLAY FLUIDITY
   ═══════════════════════════════════════════════════════════════════ */
@media screen and (min-width: 769px) {
  /* Retain clean desktop typography */
  input, textarea, select {
    font-size: 14px;
  }

  /* Desktop Slim Rail Navigation */
  .desktop-nav-rail {
    display: flex !important;
    width: 68px !important;
    min-width: 68px !important;
    flex-shrink: 0;
  }

  .sidebar .mode-toggle-bar {
    display: none !important;
  }

  /* Multi-pane chat layout: Sidebar + Conversation pane */
  .app-container {
    display: flex !important;
    flex-direction: row !important;
    max-width: 100vw;
  }

  .sidebar {
    width: 360px !important;
    min-width: 340px !important;
    max-width: 400px !important;
    border-right: 1px solid var(--line) !important;
  }

  .chat-panel {
    display: flex !important;
    flex: 1 !important;
  }

  /* Custom Desktop WebKit Scrollbars */
  ::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  ::-webkit-scrollbar-track {
    background: transparent;
  }

  ::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.28);
    border-radius: 999px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.5);
  }
}




/* ==========================================================================
   WebRTC Calling, Live Status, Starred, Timeline & Media Cards Parity Styles
   ========================================================================== */

/* WebRTC Call Modal */
#webrtc-call-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(10, 15, 29, 0.92);
  backdrop-filter: blur(28px) saturate(190%);
  -webkit-backdrop-filter: blur(28px) saturate(190%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

#webrtc-call-modal.active {
  opacity: 1;
  pointer-events: auto;
}

.webrtc-call-card {
  position: relative;
  width: 100%;
  max-width: 480px;
  height: 680px;
  max-height: 90vh;
  background: linear-gradient(180deg, rgba(30, 41, 59, 0.8) 0%, rgba(15, 23, 42, 0.95) 100%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 28px;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.08) inset;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.webrtc-call-card.video-mode {
  max-width: 760px;
  height: 780px;
}

.webrtc-call-header {
  padding: 24px 20px 16px;
  text-align: center;
  z-index: 5;
}

.webrtc-call-avatar-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 24px;
}

.webrtc-call-avatar-img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4);
  margin-bottom: 20px;
  animation: callPulseAvatar 2.4s infinite ease-in-out;
}

@keyframes callPulseAvatar {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4), 0 0 0 0 rgba(59, 130, 246, 0.5);
  }
  50% {
    transform: scale(1.04);
    box-shadow: 0 16px 44px rgba(0, 0, 0, 0.5), 0 0 0 16px rgba(59, 130, 246, 0);
  }
}

.webrtc-video-container {
  position: relative;
  width: 100%;
  flex: 1;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

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

#local-video {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 130px;
  height: 180px;
  border-radius: 16px;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  z-index: 10;
  background: #111;
  transform: scaleX(-1);
}

.webrtc-call-controls {
  padding: 20px 24px 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: linear-gradient(180deg, transparent 0%, rgba(10, 15, 29, 0.8) 40%);
  z-index: 10;
}

.webrtc-ctrl-btn {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  font-size: 1.25rem;
  backdrop-filter: blur(8px);
}

.webrtc-ctrl-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: translateY(-2px);
}

.webrtc-ctrl-btn.active {
  background: rgba(239, 68, 68, 0.85);
  color: #fff;
}

.webrtc-ctrl-btn.hangup {
  background: #ef4444;
  color: #fff;
  width: 60px;
  height: 60px;
  box-shadow: 0 8px 20px rgba(239, 68, 68, 0.45);
}

.webrtc-ctrl-btn.hangup:hover {
  background: #dc2626;
  transform: scale(1.05);
}

/* Incoming Call Floating Banner */
#incoming-call-banner {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(-120%);
  z-index: 100000;
  transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  min-width: 320px;
  max-width: 460px;
  background: rgba(15, 23, 42, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1) inset;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 999px;
  padding: 10px 16px 10px 14px;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 14px;
}

#incoming-call-banner.active {
  transform: translateX(-50%) translateY(0);
}

.incoming-call-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
  color: #fff;
  overflow: hidden;
  flex-shrink: 0;
  border: 2px solid rgba(255, 255, 255, 0.2);
}

.incoming-call-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.incoming-call-info {
  flex: 1;
  min-width: 0;
  text-align: left;
}

.incoming-caller-name {
  font-weight: 700;
  font-size: 14px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.incoming-call-type {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.72);
  margin-top: 1px;
}

.incoming-call-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: 6px;
  flex-shrink: 0;
}

.incoming-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  cursor: pointer;
  transition: transform 0.15s ease, background-color 0.2s;
}

.incoming-btn:active {
  transform: scale(0.92);
}

.incoming-btn.accept-btn, .incoming-btn.accept {
  background: #22c55e;
  color: #fff;
  box-shadow: 0 4px 14px rgba(34, 197, 94, 0.4);
}

.incoming-btn.decline-btn, .incoming-btn.decline {
  background: #ef4444;
  color: #fff;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.4);
}

/* Breathing Glow Status Dot */
.dot-breathing-glow {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
  display: inline-block;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
  animation: breathingGlow 2s infinite ease-in-out;
}

@keyframes breathingGlow {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
  }
  70% {
    transform: scale(1.15);
    box-shadow: 0 0 0 8px rgba(34, 197, 94, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
  }
}

/* Shiny Text Animation for VIP and Badges */
.shiny-text {
  background: linear-gradient(90deg, #93c5fd 0%, #ffffff 50%, #93c5fd 100%);
  background-size: 200% auto;
  color: transparent !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  animation: shinyShimmer 3s linear infinite;
  display: inline-block;
}

@keyframes shinyShimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

/* Call Log Badge in Chat */
.call-log-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 14px;
  background: rgba(148, 163, 184, 0.12);
  border: 1px solid rgba(148, 163, 184, 0.2);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--text-secondary, #94a3b8);
  margin: 4px 0;
}

/* Pulse Quote and Time Capsule Cards */
.pulse-quote-card {
  padding: 10px 14px;
  margin-bottom: 6px;
  border-radius: 12px;
  background: rgba(59, 130, 246, 0.12);
  border-left: 3px solid #3b82f6;
  font-size: 0.82rem;
  color: var(--text-secondary, #cbd5e1);
  display: flex;
  align-items: center;
  gap: 8px;
}

.time-capsule-card {
  padding: 10px 14px;
  margin-bottom: 6px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(234, 179, 8, 0.12) 0%, rgba(249, 115, 22, 0.12) 100%);
  border: 1px dashed rgba(234, 179, 8, 0.4);
  font-size: 0.82rem;
  color: #facc15;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* TTS Read Aloud Icon Button */
.msg-tts-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 2px 4px;
  color: var(--text-tertiary, #94a3b8);
  opacity: 0.6;
  transition: opacity 0.15s, transform 0.15s;
  font-size: 0.85rem;
}

.msg-tts-btn:hover {
  opacity: 1;
  transform: scale(1.15);
}

/* Starred Messages & Friendship Timeline Modal Windows */
.modal-overlay-fluid {
  position: fixed;
  inset: 0;
  background: rgba(10, 15, 29, 0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.modal-dialog-fluid {
  width: 100%;
  max-width: 520px;
  background: var(--bg-card, #1e293b);
  border: 1px solid var(--line, rgba(255, 255, 255, 0.1));
  border-radius: 24px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 85vh;
}

/* ==========================================================================
   Universal Utility & Rail Avatar Robust Fallbacks
   ========================================================================== */
.hidden {
  display: none !important;
}

.rail-avatar-box {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  overflow: visible;
}

.rail-avatar-box img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  z-index: 1;
}

.rail-avatar-box img.hidden,
.rail-avatar-box img[src=""],
.rail-avatar-box img:not([src]) {
  display: none !important;
}

.rail-avatar-box #railAvatarInitials {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  text-transform: uppercase;
  font-weight: 800;
  font-size: 14px;
  line-height: 1;
  z-index: 0;
}

.rail-avatar-box #railAvatarInitials.hidden {
  display: none !important;
}

.rail-online-dot {
  z-index: 2;
}