/* Browser-owned surfaces share Miri's Flutter design roles.
 * Palette: AppColors; spacing: AppSpacing; control size: AppLayout;
 * motion: AppMotion. Keep raw values here, outside individual page markup.
 */
:root {
  color-scheme: light dark;
  --miri-paper: #f8f7f4;
  --miri-surface: #fffefa;
  --miri-ink: #2c2c2c;
  --miri-ink-secondary: #525252;
  --miri-border: rgb(44 44 44 / 15%);
  --miri-font-ui: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --miri-font-brand: "Montserrat", var(--miri-font-ui);
  --miri-text-ui: 0.875rem;
  --miri-text-input: 0.9375rem;
  --miri-text-title: 1.5rem;
  --miri-font-content: "Noto Serif KR", "Noto Serif JP", "Noto Serif TC", Georgia, serif;
  --miri-error: #b3261e;
  --miri-text-brand: 1.5rem;
  --miri-line-ui: 1.5;
  --miri-tracking-brand: 0.08em;
  --miri-space-xs: 4px;
  --miri-space-sm: 8px;
  --miri-space-md: 12px;
  --miri-space-base: 16px;
  --miri-space-horizontal: 20px;
  --miri-space-xl: 24px;
  --miri-space-xxl: 32px;
  --miri-touch-primary: 52px;
  --miri-touch-compact: 44px;
  --miri-content-editorial: 480px;
  --miri-control-border: 1px;
  --miri-control-radius: 8px;
  --miri-motion-fast: 200ms;
  --miri-motion-enter: 300ms;
  --miri-ease-enter: cubic-bezier(0.215, 0.61, 0.355, 1);
  /* Fixed startup palette: AppColors.darkBackground / moonlight.
   * Artwork: branding/launch_smoke.png; choreography mirrors LaunchVisualSpec.
   */
  --miri-launch-background: #0d0d0d;
  --miri-launch-ink: #ebebeb;
  --miri-launch-size: 288px;
  --miri-launch-ease: cubic-bezier(0.45, 0, 0.55, 1);
  /* Existing notice anchor stays above the conversation input area. */
  --miri-notice-bottom: 140px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --miri-paper: #0d0d0d;
    --miri-surface: #1a1a1a;
    --miri-ink: #ebebeb;
    --miri-ink-secondary: #a8a8a8;
    --miri-border: rgb(235 235 235 / 15%);
    --miri-error: #cf6679;
  }
}

.miri-web-splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  overflow: hidden;
  background: var(--miri-launch-background);
  color: var(--miri-launch-ink);
  pointer-events: none;
}

.miri-web-splash.fade {
  animation: miri-smoke-dissolve 900ms cubic-bezier(0.645, 0.045, 0.355, 1) both;
}

@keyframes miri-smoke-dissolve {
  from { opacity: 1; }
  to { opacity: 0; }
}

.miri-web-brand {
  /* Preserve the existing brand for assistive technology; the startup artwork
   * is decorative and fills the viewport like the native launch illustration.
   */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.miri-web-mark {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.launch-smoke, .launch-smoke-poster {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.launch-smoke { opacity: 0; }
.launch-smoke[data-state="ready"] { opacity: 1; }

.miri-web-mark > svg {
  display: block;
  width: 100%;
  height: 100%;
}

.miri-web-mark [data-motion="orbit"] {
  transform-box: view-box;
  transform-origin: 50% 50%;
  animation: miri-web-orbit var(--launch-cycle) var(--miri-launch-ease) infinite;
}

.miri-web-mark [data-motion="transit"] {
  transform-box: view-box;
  animation: miri-web-transit var(--launch-cycle) var(--miri-launch-ease) infinite;
}

.miri-web-mark [data-motion="pulse"] {
  animation: miri-web-pulse var(--launch-cycle) var(--miri-launch-ease) infinite;
}

.miri-web-mark [data-motion="drift"] {
  transform-box: view-box;
  transform-origin: 50% 50%;
  animation: miri-web-stellar-drift var(--launch-cycle) var(--miri-launch-ease) infinite;
}

@keyframes miri-web-stellar-drift {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  50% { transform: translate(var(--drift-x), var(--drift-y)) rotate(var(--drift-turn)); }
}

.miri-web-splash.fade [data-motion] {
  animation-play-state: paused;
}

.miri-web-notice {
  position: fixed;
  bottom: var(--miri-notice-bottom);
  left: 50%;
  transform: translateX(-50%);
  z-index: 99999;
  box-sizing: border-box;
  width: max-content;
  max-width: min(var(--miri-content-editorial), calc(100% - 2 * var(--miri-space-horizontal)));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--miri-space-sm) var(--miri-space-md);
  padding: var(--miri-space-sm) var(--miri-space-md);
  border: var(--miri-control-border) solid var(--miri-border);
  border-radius: var(--miri-control-radius);
  background: var(--miri-surface);
  color: var(--miri-ink-secondary);
  font-family: var(--miri-font-ui);
  font-size: var(--miri-text-ui);
  line-height: var(--miri-line-ui);
  pointer-events: auto;
}

.miri-web-notice > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.miri-web-button {
  box-sizing: border-box;
  min-width: var(--miri-touch-compact);
  min-height: var(--miri-touch-compact);
  padding: var(--miri-space-sm) var(--miri-space-md);
  border: var(--miri-control-border) solid var(--miri-ink);
  border-radius: var(--miri-control-radius);
  background: transparent;
  color: var(--miri-ink);
  font: 500 var(--miri-text-ui) / var(--miri-line-ui) var(--miri-font-ui);
  cursor: pointer;
}

.miri-web-button:focus-visible {
  outline: 2px solid var(--miri-ink);
  outline-offset: var(--miri-space-xs);
}

@keyframes miri-web-orbit {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(var(--launch-tilt)); }
}

@keyframes miri-web-transit {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(var(--launch-transit)); }
}

@keyframes miri-web-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: var(--launch-pulse-floor); }
}

@media (prefers-reduced-motion: reduce) {
  .miri-web-splash { transition: none; }
  .miri-web-mark [data-motion], .launch-smoke { animation: none; will-change: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .miri-web-splash.fade { animation: none; opacity: 0; }
  .launch-smoke, .miri-web-splash.fade .miri-web-mark { animation: none; }
}