body {
  margin: 0;
}

html {
  overflow-x: hidden;
  overflow-y: scroll;
  block-size: 100%;
  min-block-size: 100dvh;
}

body,
#app {
  block-size: 100%;
  min-block-size: 100dvh;
}

#loading-bg {
  position: fixed;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--initial-loader-bg, #FAF5EE);
  block-size: 100%;
  gap: 1rem 0;
  inline-size: 100%;
}

/* ── Large cake-motif loader (mirrors the storefront designer loading screen) ──
   Personality touches, not a generic AI gradient blob:
   - candle flames flicker independently and irregularly, like real fire
   - the badge drifts with a slight rotation wobble instead of a robotic bounce
   - the dots bounce like a chat "typing" indicator, not a synced pulse
   - the label breathes softly and the ellipsis ticks like a real timer         */

.cd-loader {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 220px;
  block-size: 220px;
}

.cd-loader-glow {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--initial-loader-color, #9A5B2D) 28%, transparent) 0%,
    color-mix(in srgb, #f9d878 10%, transparent) 45%,
    transparent 72%
  );
  animation: cd-loader-glow-pulse 3.1s cubic-bezier(0.45, 0.05, 0.15, 0.95) infinite;
}

.cd-loader-badge {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 150px;
  block-size: 150px;
  border-radius: 50%;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--initial-loader-color, #9A5B2D) 18%, transparent) 0%,
    var(--initial-loader-bg, #FAF5EE) 100%
  );
  box-shadow:
    0 12px 40px color-mix(in srgb, var(--initial-loader-color, #9A5B2D) 25%, transparent),
    0 0 0 8px color-mix(in srgb, var(--initial-loader-color, #9A5B2D) 10%, transparent);
  color: var(--initial-loader-color, #9A5B2D);
  animation: cd-loader-badge-drift 4.4s cubic-bezier(0.45, 0.05, 0.15, 0.95) infinite;
}

.cd-loader-badge svg {
  inline-size: 72px;
  block-size: 72px;
  overflow: visible;
}

.cd-cake-flame {
  color: #FF7B6B;
  transform-box: fill-box;
  transform-origin: center;
  animation: cd-flame-flicker 1.15s ease-in-out infinite;
}

.cd-loader-dots {
  display: flex;
  gap: 0.6rem;
}

.cd-loader-dot {
  inline-size: 11px;
  block-size: 11px;
  border-radius: 50%;
  animation: cd-loader-dot-bounce 1.1s cubic-bezier(0.45, 0, 0.55, 1) infinite;
}

.cd-loader-text {
  margin: 0;
  display: flex;
  align-items: baseline;
  font-family: 'Public Sans', 'IBM Plex Sans Arabic', sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--initial-loader-color, #9A5B2D);
  animation: cd-loader-text-breathe 3.1s ease-in-out infinite;
}

.cd-loader-ellipsis span {
  display: inline-block;
  opacity: 0.25;
  animation: cd-loader-ellipsis-tick 1.35s steps(1) infinite;
}

.cd-loader-ellipsis span:nth-child(1) { animation-delay: 0ms; }
.cd-loader-ellipsis span:nth-child(2) { animation-delay: 450ms; }
.cd-loader-ellipsis span:nth-child(3) { animation-delay: 900ms; }

@keyframes cd-loader-glow-pulse {
  0%, 100% { opacity: 0.5;  transform: scale(1); }
  50%      { opacity: 0.95; transform: scale(1.12); }
}

@keyframes cd-loader-badge-drift {
  0%   { transform: translateY(0)     rotate(0deg); }
  25%  { transform: translateY(-7px)  rotate(-1.4deg); }
  50%  { transform: translateY(-14px) rotate(0deg); }
  75%  { transform: translateY(-6px)  rotate(1.4deg); }
  100% { transform: translateY(0)     rotate(0deg); }
}

@keyframes cd-flame-flicker {
  0%   { opacity: 0.7; transform: scale(1)    translateY(0); }
  18%  { opacity: 1;   transform: scale(1.3)  translateY(-0.4px); }
  34%  { opacity: 0.55; transform: scale(0.8) translateY(0.2px); }
  52%  { opacity: 1;   transform: scale(1.2)  translateY(-0.3px); }
  68%  { opacity: 0.65; transform: scale(0.9) translateY(0); }
  85%  { opacity: 1;   transform: scale(1.1)  translateY(-0.2px); }
  100% { opacity: 0.7; transform: scale(1)    translateY(0); }
}

@keyframes cd-loader-dot-bounce {
  0%, 60%, 100% { transform: translateY(0);    opacity: 0.55; }
  30%           { transform: translateY(-7px); opacity: 1; }
}

@keyframes cd-loader-text-breathe {
  0%, 100% { opacity: 0.75; }
  50%      { opacity: 1; }
}

@keyframes cd-loader-ellipsis-tick {
  0%, 33%   { opacity: 0.25; }
  34%, 100% { opacity: 1; }
}