/*
 * File previews: the inside of a file window. This is the only part of the
 * site with light and dark modes (View → Light mode / Dark mode).
 */

.preview {
  --bg: #fff;
  --fg: #000;
  --fg-2: #757575;
  --bubble: #e9e9e9;
  min-height: 100%;
  padding: 20px;
  background: var(--bg);
  color: var(--fg);
  transition: background-color 0.2s, color 0.2s;
}

.preview[data-theme="dark"] {
  --bg: #0d0d0d;
  --fg: #fff;
  --fg-2: #8a8a8a;
  --bubble: #262626;
}

.preview--voice {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ---------- Chat scene ---------- */

/* Scoped variables keep the status label height in step with the text. */
.chat {
  --font-size: 14px;
  --line-height: 22px;
  display: flex;
  flex-direction: column;
  width: 100%;
  font-size: var(--font-size);
  line-height: var(--line-height);
  -webkit-user-select: text;
  user-select: text;
}

.chat__bubble {
  align-self: flex-end;
  max-width: min(312px, 88%);
  padding: 12px 18px;
  border-radius: 22px;
  background: var(--bubble);
}

.chat__reply {
  margin: 20px 0 0;
}

.chat__status {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  min-height: 24px;
}

.indicator {
  flex: none;
  width: 24px;
  height: 24px;
  color: var(--fg);
}

.indicator svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.status-label {
  position: relative;
  flex: 1;
  height: var(--line-height);
}

.status-label__text {
  position: absolute;
  inset: 0 auto 0 0;
  white-space: nowrap;
  color: transparent;
  background-image: linear-gradient(90deg, var(--fg-2) 0%, var(--fg-2) 35%, var(--fg) 50%, var(--fg-2) 65%, var(--fg-2) 100%);
  background-size: 300% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  animation: shimmer var(--shimmer-duration, 2.2s) linear infinite;
  transition:
    opacity 0.4s cubic-bezier(0.2, 0.8, 0.3, 1),
    transform 0.4s cubic-bezier(0.2, 0.8, 0.3, 1),
    filter 0.4s;
}

.status-label__text[data-state="out"] {
  opacity: 0;
  transform: translateY(-6px);
  filter: blur(2px);
}

.status-label__text[data-state="in"] {
  opacity: 0;
  transform: translateY(6px);
  filter: blur(2px);
}

@keyframes shimmer {
  from { background-position: 100% 0; }
  to { background-position: 0% 0; }
}

.os[data-paused="true"] .status-label__text {
  animation-play-state: paused;
}

/* ---------- Voice scene ---------- */

.voice {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 560px;
}

.voice__stage {
  width: 100%;
  aspect-ratio: 2 / 1;
  color: var(--fg);
}

.voice__stage svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.voice__caption {
  height: 20px;
  color: var(--fg-2);
  font-size: 12px;
}