/* ============================================================================
   LiveConnect — Preloader (styles)
   ----------------------------------------------------------------------------
   All blues, all outline, lightweight. No external dependencies.
   Drop into index.html OR import as a global stylesheet in Angular.
   ============================================================================ */

.lc-preloader {
  /* Blue palette — multiple tones, outline-only */
  --lc-bg:        #F4F8FF;
  --lc-bg-dark:   #0B1530;
  --lc-line:      #DCE6FA;
  --lc-50:        #EFF4FF;
  --lc-100:       #DBE6FF;
  --lc-200:       #BFD1FF;
  --lc-300:       #93B0FF;
  --lc-400:       #6589F7;
  --lc-500:       #3B66EE;
  --lc-600:       #2549D6;
  --lc-700:       #1A36AB;
  --lc-800:       #122574;
  --lc-ink:       #0E1B3D;

  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 4vmin, 40px);
  background: var(--lc-bg);
  z-index: 9999;
  overflow: hidden;
  padding: 24px;
  font-family: 'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;
  letter-spacing: -0.022em;
  color: var(--lc-ink);
}

/* ---------------------------------------------------------------------------
   THEME VARIANTS — synced via app.component.ts when Angular sets data-theme
   on document.body. The preloader element mirrors that value through
   app.component's hidePreloader / showPreloader helpers so colors stay
   coherent even on the re-show path (auth → /messaging).
   --------------------------------------------------------------------------- */

/* dark — deep navy, blue accent family (#050d19 body bg) */
.lc-preloader[data-theme="dark"] {
  --lc-bg:    #050d19;
  --lc-bg-dark: #020609;
  --lc-line:  rgba(255,255,255,0.07);
  --lc-50:    rgba(16,98,255,0.08);
  --lc-100:   rgba(16,98,255,0.18);
  --lc-200:   rgba(52,122,255,0.32);
  --lc-300:   rgba(88,145,255,0.55);
  --lc-400:   #93B0FF;
  --lc-500:   #BFD1FF;
  --lc-600:   #DBE6FF;
  --lc-700:   #FFFFFF;
  --lc-800:   #FFFFFF;
  --lc-ink:   #FFFFFF;
}

/* liveconnectdark — midnight navy, green accent (#131729 body bg) */
.lc-preloader[data-theme="liveconnectdark"] {
  --lc-bg:    #131729;
  --lc-bg-dark: #0a0d1b;
  --lc-line:  rgba(255,255,255,0.07);
  --lc-50:    rgba(52,208,88,0.07);
  --lc-100:   rgba(52,208,88,0.15);
  --lc-200:   rgba(52,208,88,0.28);
  --lc-300:   rgba(77,219,117,0.50);
  --lc-400:   #56db75;
  --lc-500:   #34d058;
  --lc-600:   #77e38e;
  --lc-700:   #b8f5c6;
  --lc-800:   #FFFFFF;
  --lc-ink:   #FFFFFF;
}

/* greypro — dark charcoal, cool grey accent (#1E2124 body bg) */
.lc-preloader[data-theme="greypro"] {
  --lc-bg:    #1E2124;
  --lc-bg-dark: #111417;
  --lc-line:  rgba(255,255,255,0.07);
  --lc-50:    rgba(101,109,125,0.10);
  --lc-100:   rgba(101,109,125,0.22);
  --lc-200:   rgba(101,109,125,0.38);
  --lc-300:   rgba(169,175,186,0.55);
  --lc-400:   #A9AFBA;
  --lc-500:   #C2C7D0;
  --lc-600:   #D8DBE2;
  --lc-700:   #FFFFFF;
  --lc-800:   #FFFFFF;
  --lc-ink:   #FFFFFF;
}

/* gamer — deep purple, violet accent (#19102E body bg) */
.lc-preloader[data-theme="gamer"] {
  --lc-bg:    #19102E;
  --lc-bg-dark: #0F032B;
  --lc-line:  rgba(255,255,255,0.07);
  --lc-50:    rgba(120,79,199,0.10);
  --lc-100:   rgba(120,79,199,0.20);
  --lc-200:   rgba(120,79,199,0.35);
  --lc-300:   rgba(152,125,226,0.55);
  --lc-400:   #987DE2;
  --lc-500:   #784FC7;
  --lc-600:   #A984FF;
  --lc-700:   #D0B8FF;
  --lc-800:   #FFFFFF;
  --lc-ink:   #FFFFFF;
}

/* stellarnight — space black, indigo-violet accent (#0F1021 body bg) */
.lc-preloader[data-theme="stellarnight"] {
  --lc-bg:    #0F1021;
  --lc-bg-dark: #060610;
  --lc-line:  rgba(255,255,255,0.07);
  --lc-50:    rgba(108,52,152,0.10);
  --lc-100:   rgba(108,52,152,0.20);
  --lc-200:   rgba(108,52,152,0.35);
  --lc-300:   rgba(163,96,245,0.55);
  --lc-400:   #A360F5;
  --lc-500:   #6C3498;
  --lc-600:   #C187D7;
  --lc-700:   #E8C8F4;
  --lc-800:   #FFFFFF;
  --lc-ink:   #FFFFFF;
}

/* cake — warm cream, rose accent (#f9f1ea body bg) */
.lc-preloader[data-theme="cake"] {
  --lc-bg:      #F9F1EA;
  --lc-bg-dark: #F1DFD0;
  --lc-line:    rgba(180,120,100,0.18);
  --lc-50:      #FDF8F4;
  --lc-100:     #F8EDE2;
  --lc-200:     #F0D5C0;
  --lc-300:     #E5B89A;
  --lc-400:     #D9936E;
  --lc-500:     #C0684B;
  --lc-600:     #A04D38;
  --lc-700:     #7A3425;
  --lc-800:     #5A2218;
  --lc-ink:     #4A2418;
}

/* lavenderpro — soft lavender, purple accent (#ffe7ff body bg) */
.lc-preloader[data-theme="lavenderpro"] {
  --lc-bg:      #FFF0FF;
  --lc-bg-dark: #FFC7FF;
  --lc-line:    rgba(160,80,180,0.16);
  --lc-50:      #FFF8FF;
  --lc-100:     #F9E0FF;
  --lc-200:     #EFC0FF;
  --lc-300:     #DC90F5;
  --lc-400:     #C060E0;
  --lc-500:     #9A3DBF;
  --lc-600:     #7830A0;
  --lc-700:     #5A2280;
  --lc-800:     #3E1560;
  --lc-ink:     #3A1658;
}

/* sky — light sky blue, cerulean accent (#C1DEFF body bg) */
.lc-preloader[data-theme="sky"] {
  --lc-bg:      #EAF4FF;
  --lc-bg-dark: #C1DEFF;
  --lc-line:    rgba(30,100,200,0.18);
  --lc-50:      #F4F9FF;
  --lc-100:     #D6EBFF;
  --lc-200:     #A8D0FF;
  --lc-300:     #72B0F0;
  --lc-400:     #4090D8;
  --lc-500:     #1E6EC0;
  --lc-600:     #1458A0;
  --lc-700:     #0C4080;
  --lc-800:     #072860;
  --lc-ink:     #0A2E5E;
}

/* aurorablue — pale lavender-blue, violet accent (#F6F2FF body bg) */
.lc-preloader[data-theme="aurorablue"] {
  --lc-bg:      #F6F2FF;
  --lc-bg-dark: #EEE8FF;
  --lc-line:    rgba(100,60,200,0.14);
  --lc-50:      #FAF8FF;
  --lc-100:     #EDE5FF;
  --lc-200:     #D4C4FF;
  --lc-300:     #B49CFF;
  --lc-400:     #9070F0;
  --lc-500:     #6E48D8;
  --lc-600:     #5432B8;
  --lc-700:     #3E2295;
  --lc-800:     #2C1575;
  --lc-ink:     #26145A;
}

/* freshforest — off-white / light grey, forest green accent (#F2F2F2 body bg) */
.lc-preloader[data-theme="freshforest"] {
  --lc-bg:      #F2F2F2;
  --lc-bg-dark: #E2E2E2;
  --lc-line:    rgba(50,140,80,0.18);
  --lc-50:      #F8FBF8;
  --lc-100:     #DFF0E0;
  --lc-200:     #B8DDB8;
  --lc-300:     #85C185;
  --lc-400:     #58A158;
  --lc-500:     #3A853A;
  --lc-600:     #2A6A2A;
  --lc-700:     #1C501C;
  --lc-800:     #103810;
  --lc-ink:     #1A3E1A;
}

/* ---------------------------------------------------------------------------
   Stage — 560×560 square holding all the SVG + messages, centered.
   --------------------------------------------------------------------------- */
.lc-stage {
  position: relative;
  width: min(72vmin, 560px);
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  container-type: inline-size;
}

/* Faint guide rings (constellation variant) */
.lc-rings {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.lc-rings::before,
.lc-rings::after {
  content: "";
  position: absolute;
  border: 1px dashed var(--lc-line);
  border-radius: 50%;
  animation: lc-rotate 60s linear infinite;
}
.lc-rings::before { width: 56%; height: 56%; }
.lc-rings::after  { width: 86%; height: 86%; animation-direction: reverse; animation-duration: 90s; }
@keyframes lc-rotate { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------------------
   Central core — pulsing chat bubble.
   --------------------------------------------------------------------------- */
.lc-core {
  position: relative;
  width: clamp(72px, 22cqi, 132px);
  height: clamp(72px, 22cqi, 132px);
  display: grid;
  place-items: center;
  z-index: 5;
}
.lc-core::before {
  content: "";
  position: absolute;
  inset: -28px;
  border-radius: 50%;
  border: 1.5px solid var(--lc-200);
  opacity: 0;
  animation: lc-core-halo 2.4s ease-out infinite;
}
.lc-core::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--lc-100) 0%, transparent 70%);
  opacity: 0.55;
  z-index: -1;
}
.lc-core svg { width: 100%; height: 100%; color: var(--lc-600); }
.lc-core svg path { stroke-dasharray: 380; stroke-dashoffset: 0; }

.lc-core.lc-pulse > svg {
  animation: lc-core-pulse 0.45s ease-out;
}
@keyframes lc-core-pulse {
  0%   { transform: scale(1);    }
  35%  { transform: scale(1.10); }
  100% { transform: scale(1);    }
}
@keyframes lc-core-halo {
  0%   { transform: scale(0.6); opacity: 0.7; }
  100% { transform: scale(1.4); opacity: 0;   }
}

/* ---------------------------------------------------------------------------
   Channel pins — 6 around the core. Position set by inline style on each.
   --------------------------------------------------------------------------- */
.lc-channel {
  position: absolute;
  left: 50%;
  top: 50%;
  width: clamp(44px, 11cqi, 64px);
  height: clamp(44px, 11cqi, 64px);
  margin: 0;
  translate: -50% -50%;
  border-radius: 50%;
  border: 1.5px solid var(--lc-300);
  background: var(--lc-bg);
  display: grid;
  place-items: center;
  color: var(--lc-600);
  transform: translate(var(--cx), var(--cy));
  z-index: 4;
  animation: lc-channel-float 4s ease-in-out infinite;
  animation-delay: var(--phase, 0s);
}
.lc-channel svg { width: 50%; height: 50%; display: block; }
.lc-channel::after {
  /* subtle inner glow when a message just left */
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1.5px solid var(--lc-200);
  opacity: 0;
  animation: lc-channel-ping 3.2s ease-out infinite;
  animation-delay: var(--phase, 0s);
}
@keyframes lc-channel-float {
  0%, 100% { transform: translate(var(--cx), var(--cy)) translateY(0); }
  50%      { transform: translate(var(--cx), var(--cy)) translateY(-4px); }
}
@keyframes lc-channel-ping {
  0%   { transform: scale(0.85); opacity: 0.8; }
  70%  { transform: scale(1.5);  opacity: 0;   }
  100% { transform: scale(1.5);  opacity: 0;   }
}

/* Channel-specific tint (still all blue, just different intensity) */
.lc-channel--whatsapp  { color: var(--lc-500); }
.lc-channel--instagram { color: var(--lc-600); }
.lc-channel--telegram  { color: var(--lc-400); }
.lc-channel--messenger { color: var(--lc-500); }
.lc-channel--email     { color: var(--lc-700); }
.lc-channel--tiktok    { color: var(--lc-800); }

/* ---------------------------------------------------------------------------
   Connector lines from each channel toward the center (decorative).
   --------------------------------------------------------------------------- */
.lc-connectors {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.lc-connectors line {
  stroke: var(--lc-line);
  stroke-width: 1;
  stroke-dasharray: 3 6;
  opacity: 0.6;
}

/* ---------------------------------------------------------------------------
   Messages — spawned by JS. Each travels from --fx/--fy → (0,0) along a
   3-point keyframe arc using a midpoint --mx/--my for the curve.
   --------------------------------------------------------------------------- */
.lc-messages {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
}

.lc-msg {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14px;
  height: 10px;
  margin: -5px 0 0 -7px;
  border: 1.5px solid currentColor;
  border-radius: 5px 5px 5px 1px;
  color: var(--lc-400);
  background: var(--lc-bg);
  animation: lc-travel 1.6s cubic-bezier(.5, 0, .35, 1) forwards;
  transform: translate(var(--fx), var(--fy)) scale(var(--scale, 0.7));
  opacity: 0;
}

/* Rich bubbles with text */
.lc-msg--rich {
  width: auto;
  height: auto;
  padding: 4px 8px;
  margin: 0;
  transform: translate(calc(-50% + var(--fx)), calc(-50% + var(--fy))) scale(var(--scale, 1));
  font: 600 11px/1 'Sora', system-ui, sans-serif;
  letter-spacing: -0.022em;
  color: var(--lc-700);
  border-color: var(--lc-300);
  background: var(--lc-bg);
  white-space: nowrap;
  border-radius: 8px 8px 8px 2px;
  box-shadow: 0 1px 0 var(--lc-50);
}

/* Vary border color slightly by channel for that "different tones of blue" feel */
.lc-msg--whatsapp  { color: var(--lc-500); }
.lc-msg--instagram { color: var(--lc-600); }
.lc-msg--telegram  { color: var(--lc-400); }
.lc-msg--messenger { color: var(--lc-300); }
.lc-msg--email     { color: var(--lc-700); }
.lc-msg--tiktok    { color: var(--lc-800); }

/* The arc: start at channel → midpoint with offset → end at center.
   For rich (text) bubbles we re-center via -50% in transform; simple bubbles
   use a different base transform. Both interpolate the same custom props. */
@keyframes lc-travel {
  0% {
    transform: translate(var(--fx), var(--fy)) scale(calc(var(--scale, 0.7) * 0.4));
    opacity: 0;
  }
  18% { opacity: 1; }
  50% {
    transform: translate(var(--mx), var(--my)) scale(var(--scale, 0.7));
    opacity: 1;
  }
  82% { opacity: 1; }
  100% {
    transform: translate(0px, 0px) scale(calc(var(--scale, 0.7) * 0.85));
    opacity: 0;
  }
}

/* Out-going (response) variants — slight color shift so eye reads them
   differently from in-bound messages. */
.lc-msg--out {
  color: var(--lc-300);
  border-radius: 5px 5px 1px 5px; /* tail flipped */
}
.lc-msg--out.lc-msg--rich {
  border-radius: 8px 8px 2px 8px;
  background: var(--lc-100);
  color: var(--lc-700);
}

/* ---------------------------------------------------------------------------
   Wordmark + progress
   --------------------------------------------------------------------------- */
.lc-meta {
  position: relative;
  display: grid;
  place-items: center;
  gap: 10px;
  z-index: 2;
}
.lc-wordmark {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font: 700 18px/1 'Sora', system-ui, sans-serif;
  letter-spacing: -0.022em;
  color: var(--lc-ink);
}
.lc-wordmark b { color: var(--lc-600); }
.lc-wordmark small {
  font-weight: 400;
  font-size: 12px;
  color: var(--lc-400);
  letter-spacing: 0;
}
.lc-progress {
  display: flex;
  gap: 4px;
}
.lc-progress i {
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--lc-300);
  animation: lc-dot 1.2s ease-in-out infinite;
}
.lc-progress i:nth-child(2) { animation-delay: 0.15s; }
.lc-progress i:nth-child(3) { animation-delay: 0.30s; }
.lc-progress i:nth-child(4) { animation-delay: 0.45s; }
@keyframes lc-dot {
  0%, 80%, 100% { opacity: 0.3; transform: translateY(0); }
  40%           { opacity: 1;   transform: translateY(-3px); background: var(--lc-600); }
}

/* ---------------------------------------------------------------------------
   VARIANT: stream — channels arrayed on left+right edges, messages flow
   horizontally through the core.
   --------------------------------------------------------------------------- */
.lc-preloader[data-variant="stream"] .lc-rings { display: none; }
.lc-preloader[data-variant="stream"] .lc-connectors { opacity: 0.4; }

/* ---------------------------------------------------------------------------
   VARIANT: orbit — channels rotate slowly around the core.
   --------------------------------------------------------------------------- */
.lc-preloader[data-variant="orbit"] .lc-channels-wrap {
  animation: lc-rotate 24s linear infinite;
}
.lc-preloader[data-variant="orbit"] .lc-channel {
  animation: lc-channel-counter 24s linear infinite;
}
@keyframes lc-channel-counter {
  from { transform: translate(var(--cx), var(--cy)) rotate(0deg); }
  to   { transform: translate(var(--cx), var(--cy)) rotate(-360deg); }
}

/* ---------------------------------------------------------------------------
   Reduced motion: dampen everything.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .lc-preloader * { animation-duration: 4s !important; }
  .lc-rings { display: none; }
}