/*
 * Gemini-style Skeleton Loader — theme-aware
 */

/* ── CSS variables for shimmer colors (overridden per theme) ── */
:root {
    --shimmer-base:   #1e293b;
    --shimmer-wave:   rgba(56, 189, 248, 0.22);
    --shimmer-speed:  2s;
}

html[data-theme="arc"] {
    --shimmer-base:   #e8eef8;
    --shimmer-wave:   rgba(79, 70, 229, 0.18);
    --shimmer-speed:  1.6s;
}

html[data-theme="linear"] {
    --shimmer-base:   #ebebec;
    --shimmer-wave:   rgba(94, 106, 210, 0.18);
    --shimmer-speed:  1.6s;
}

.skeleton-loader {
  width: 100%;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 5px 0;
}

.skeleton-line {
  height: 12px;
  background-color: var(--shimmer-base);
  border-radius: 6px;
  position: relative;
  overflow: hidden;
}

.skeleton-line:nth-child(1) { width: 70%; }
.skeleton-line:nth-child(2) { width: 90%; }
.skeleton-line:nth-child(3) { width: 50%; }

.skeleton-line::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--shimmer-wave) 50%,
    transparent 100%
  );
  transform: translateX(-100%);
  animation: shimmer var(--shimmer-speed) infinite;
}

@keyframes shimmer {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Smooth fade-in for text */
.assistant-content {
  animation: fadeIn 0.5s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}