:root {
  --paper: #f7f8f6;
  --surface: #ffffff;
  --ink: #171a18;
  --muted: #68716c;
  --line: #e3e7e4;
  --coral: #e5483f;
  --coral-dark: #c93c35;
  --teal: #167a5b;
  --gold: #a66b16;
}

[x-cloak] { display: none !important; }

html { background: var(--paper); }

body {
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif;
}

.app-shell {
  width: min(100%, 480px);
  min-height: 100vh;
  margin: 0 auto;
  padding: 0 14px;
}

.surface {
  background: var(--surface);
  border: 1px solid var(--line);
}

.coral-gradient { background: var(--coral); }
.teal-gradient { background: var(--teal); }
.conversation-workspace { display: flex; flex-direction: column; }
.conversation-stage { display: flex; min-height: 0; flex: 1; flex-direction: column; }
.conversation-scroll { min-height: 0; flex: 1; overflow-y: auto; }

.conversation-composer {
  flex: none;
  padding-bottom: env(safe-area-inset-bottom);
  border-top: 1px solid var(--line);
  background: var(--surface);
}

.page-enter { animation: page-enter .28s ease both; }
.soft-pop { animation: soft-pop .22s ease both; }

.pressing {
  box-shadow: 0 0 0 6px rgba(229, 72, 63, .14);
  transform: translateY(1px);
}

.scrollbar-none::-webkit-scrollbar { display: none; }
.scrollbar-none { -ms-overflow-style: none; scrollbar-width: none; }

@keyframes page-enter {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes soft-pop {
  from { opacity: 0; transform: scale(.985) translateY(6px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.typing-dots span {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 4px;
  border-radius: 999px;
  background: var(--muted);
  animation: typing-dot 1s ease-in-out infinite;
}

.typing-dots span:nth-child(2) { animation-delay: .15s; }
.typing-dots span:nth-child(3) { animation-delay: .3s; margin-right: 0; }

@keyframes typing-dot {
  0%, 80%, 100% { opacity: .35; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-3px); }
}

.render-preview-frame {
  position: relative;
  overflow: hidden;
  background: #241f1d;
  border: 1px solid #39312e;
}

.render-pulse { animation: render-pulse 1.5s ease-in-out infinite; }
.render-progress-orbit { position: relative; }

.render-progress-orbit::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 999px;
  border: 2px solid rgba(229, 72, 63, .18);
  border-top-color: var(--coral);
  animation: render-orbit 1s linear infinite;
}

@keyframes render-pulse {
  0%, 100% { transform: scale(1); opacity: .82; }
  50% { transform: scale(1.06); opacity: 1; }
}

@keyframes render-orbit { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  .page-enter,
  .soft-pop,
  .typing-dots span,
  .render-pulse,
  .render-progress-orbit::before {
    animation: none !important;
    transform: none !important;
  }
}