/* ===================================================================
   AiTenderChat — Splash + custom loaders
   =================================================================== */

#at-splash {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: radial-gradient(120% 80% at 50% 30%, #1a1d3a 0%, #0a0c1e 80%);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: calc(max(env(safe-area-inset-top, 0px), var(--sim-safe-top, 0px)) + 40px) 24px 40px;
  transition: opacity 400ms cubic-bezier(.16,1,.3,1), transform 400ms cubic-bezier(.16,1,.3,1), filter 400ms ease-out;
  will-change: opacity, transform;
}

#at-splash.splash-hide {
  opacity: 0;
  transform: scale(1.04);
  filter: blur(8px);
  pointer-events: none;
}
#at-splash.splash-gone { display: none; }

.splash-mark-wrap {
  position: relative;
  width: 96px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 28px;
}

/* Glow halo */
.splash-mark-wrap::before {
  content: '';
  position: absolute;
  inset: -24px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99,102,241,.55) 0%, rgba(139,92,246,.18) 50%, transparent 70%);
  filter: blur(16px);
  animation: splash-pulse 2.4s ease-in-out infinite;
}
@keyframes splash-pulse {
  0%, 100% { opacity: .55; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.12); }
}

/* Brand mark — "AT" gradient disk */
.splash-mark {
  width: 84px; height: 84px;
  border-radius: 24px;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  box-shadow:
    0 16px 48px rgba(99,102,241,.55),
    inset 0 1px 0 rgba(255,255,255,.25),
    inset 0 -1px 0 rgba(0,0,0,.15);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.splash-mark svg { width: 44px; height: 44px; color: #fff; }
.splash-brand {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Helvetica Neue", sans-serif;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: -0.02em;
  color: #fff;
  text-shadow: 0 1px 0 rgba(0,0,0,.18), 0 0 18px rgba(255,255,255,.35);
  line-height: 1;
  padding: 0 2px;
  user-select: none;
}

/* Orbit dots — 3 particles around mark (Apple Intelligence vibe) */
.splash-orbit {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  z-index: 2;
  pointer-events: none;
  animation: splash-orbit-rotate 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.splash-orbit::before,
.splash-orbit::after,
.splash-orbit > i {
  content: '';
  position: absolute;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 12px rgba(255,255,255,.8), 0 0 24px rgba(139,92,246,.6);
  top: 50%; left: 50%;
  margin: -4px;
}
.splash-orbit::before { transform: rotate(0deg)   translateY(-56px); opacity: 1;   }
.splash-orbit::after  { transform: rotate(120deg) translateY(-56px); opacity: .6;  }
.splash-orbit > i     { display: block; transform: rotate(240deg) translateY(-56px); opacity: .3; }
@keyframes splash-orbit-rotate {
  0% { transform: rotate(0); }
  100% { transform: rotate(360deg); }
}

.splash-title {
  font-family: -apple-system, BlinkMacSystemFont, "Inter", sans-serif;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  background: linear-gradient(135deg, #fff 0%, #c7d2fe 60%, #a78bfa 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 6px;
}
.splash-sub {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,.55);
  letter-spacing: -0.005em;
}

/* ====== Inline dot-loader (e.g. composer / inline status) ====== */
.at-dots {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  height: 16px;
}
.at-dots span {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
  opacity: .35;
  animation: at-dots 1.2s ease-in-out infinite;
}
.at-dots span:nth-child(2) { animation-delay: .15s; }
.at-dots span:nth-child(3) { animation-delay: .30s; }
@keyframes at-dots {
  0%, 80%, 100% { opacity: .25; transform: scale(.85); }
  40%           { opacity: 1;   transform: scale(1.1); }
}

/* ====== Reduced motion ====== */
@media (prefers-reduced-motion: reduce) {
  .splash-mark-wrap::before, .splash-orbit, .at-dots span { animation: none !important; }
}

/* Logo image variant — squircle PNG instead of gradient+text */
.splash-mark.splash-mark-logo {
  background: transparent !important;
  box-shadow: 0 16px 48px rgba(99,102,241,.55), 0 24px 64px rgba(139,92,246,.35);
  border-radius: 24px;
  overflow: visible;
  width: 96px; height: 96px;
}
.splash-mark.splash-mark-logo .splash-logo-img {
  width: 100%; height: 100%;
  display: block;
  border-radius: 22px;
  filter: drop-shadow(0 4px 12px rgba(99,102,241,.35));
}