/* ── Custom Fonts ── */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/InterVariable.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/InterVariable-Italic.woff2") format("woff2");
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/JetBrainsMono-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/JetBrainsMono-Bold.woff2") format("woff2");
}

@font-face {
  font-family: "JetBrains Mono";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/JetBrainsMono-Italic.woff2") format("woff2");
}

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 40 20% 94%;
    --foreground: 220 15% 15%;
    --card: 40 15% 98%;
    --card-foreground: 220 15% 15%;
    --popover: 40 15% 98%;
    --popover-foreground: 220 15% 15%;
    --primary: 220 15% 25%;
    --primary-foreground: 40 15% 98%;
    --secondary: 40 10% 90%;
    --secondary-foreground: 220 15% 20%;
    --muted: 40 10% 88%;
    --muted-foreground: 220 10% 45%;
    --accent: 40 15% 85%;
    --accent-foreground: 220 15% 15%;
    --destructive: 0 70% 55%;
    --destructive-foreground: 0 0% 98%;
    --warning: 35 90% 50%;
    --warning-foreground: 30 10% 15%;
    --border: 40 10% 82%;
    --input: 40 10% 85%;
    --ring: 220 15% 25%;
    --radius: 0.625rem;

    /* 用户气泡配色 - 中性灰调 */
    --user-bubble-bg: 40 5% 88%;
    --user-bubble-fg: 220 15% 15%;

    /* 侧边栏专用 */
    --sidebar-bg: 40 20% 94% / 0.65;
    --sidebar-border: 40 10% 82%;

    /* 玻璃效果背景 */
    --glass-bg: 40 20% 94% / 0.7;
    --glass-border: 40 10% 82% / 0.5;
  }

  /* Neutral warm dark palette */
  .dark {
    --background: 30 6% 10%;
    --foreground: 40 10% 95%;
    --card: 30 5% 14%;
    --card-foreground: 40 10% 95%;
    --popover: 30 5% 14%;
    --popover-foreground: 40 10% 95%;
    --primary: 40 10% 85%;
    --primary-foreground: 30 6% 10%;
    --secondary: 30 5% 20%;
    --secondary-foreground: 40 10% 90%;
    --muted: 30 5% 22%;
    --muted-foreground: 40 8% 60%;
    --accent: 30 5% 25%;
    --accent-foreground: 40 10% 95%;
    --destructive: 0 60% 50%;
    --destructive-foreground: 0 0% 98%;
    --warning: 35 80% 55%;
    --warning-foreground: 35 10% 95%;
    --border: 30 5% 30%;
    --input: 30 5% 20%;
    --ring: 40 10% 70%;

    /* 用户气泡配色 - 深色模式 */
    --user-bubble-bg: 30 5% 25%;
    --user-bubble-fg: 40 10% 95%;

    /* 侧边栏专用 */
    --sidebar-bg: 30 6% 10% / 0.65;
    --sidebar-border: 30 5% 20%;

    /* 玻璃效果背景 */
    --glass-bg: 30 6% 10% / 0.7;
    --glass-border: 30 5% 20% / 0.5;
  }
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply text-foreground;
    font-feature-settings: "rlig" 1, "calt" 1;
  }

  /* Radix ScrollArea 内部使用 display:table，会被内容撑宽，需要 table-layout:fixed 限制宽度 */
  [data-radix-scroll-area-viewport] > div {
    table-layout: fixed !important;
    width: 100% !important;
  }
}

/* ── Stardom Theme — reuses main app colors ── */
.stardom-theme {
  /* 背景/文字/边框 — 直接复用主应用变量 */
  --bz-bg: hsl(var(--background));
  --bz-bg-card: hsl(var(--card));
  --bz-bg-panel: hsl(var(--background));
  --bz-bg-hover: hsl(var(--muted));
  --bz-border: hsl(var(--border));
  --bz-text: hsl(var(--foreground));
  --bz-text-dim: hsl(var(--muted-foreground));

  /* 强调色 — 协作星图专属，保持品牌感 */
  --bz-cyan: #06b6d4;
  --bz-cyan-glow: #22d3ee;
  --bz-amber: #f59e0b;
  --bz-amber-glow: #fbbf24;
  --bz-green: #10b981;
  --bz-green-glow: #34d399;
  --bz-red: #ef4444;
  --bz-purple: #8b5cf6;
  --bz-blue: #3b82f6;
  --bz-border-glow: #0ea5e9;
}

/* Stardom pulse animations */
@keyframes bz-pulse-green {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
  50% { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
}
@keyframes bz-pulse-yellow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4); }
  50% { box-shadow: 0 0 0 6px rgba(245, 158, 11, 0); }
}
@keyframes bz-pulse-blue {
  0%, 100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4); }
  50% { box-shadow: 0 0 0 6px rgba(59, 130, 246, 0); }
}
@keyframes bz-pulse-red {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
  50% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
}
@keyframes bz-glow {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}
@keyframes bz-flow {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
@keyframes bz-node-breathe {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(1.05); opacity: 1; }
}
@keyframes bz-link-pulse {
  0% { stroke-dashoffset: 20; }
  100% { stroke-dashoffset: 0; }
}
@keyframes bz-event-pop {
  0% { transform: scale(0.95); opacity: 0; }
  50% { transform: scale(1.02); }
  100% { transform: scale(1); opacity: 1; }
}

.bz-status-idle { background: var(--bz-green); animation: bz-pulse-green 2s ease-in-out infinite; }
.bz-status-busy { background: var(--bz-amber); animation: bz-pulse-yellow 1.5s ease-in-out infinite; }
.bz-status-collaborating { background: var(--bz-blue); animation: bz-pulse-blue 2s ease-in-out infinite; }
.bz-status-error { background: var(--bz-red); animation: bz-pulse-red 1.2s ease-in-out infinite; }

.bz-card-enter { animation: bz-event-pop 0.3s ease-out; }

.bz-glow-text { text-shadow: 0 0 8px currentColor; }
.bz-glow-border { box-shadow: 0 0 0 1px var(--bz-border-glow), 0 0 15px -3px rgba(14, 165, 233, 0.2); }

/* Phaser canvas — fill container, no overflow */
.stardom-theme canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
  outline: none;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  @apply bg-transparent;
}

::-webkit-scrollbar-thumb {
  @apply bg-zinc-400 dark:bg-zinc-600 rounded-full;
}

::-webkit-scrollbar-thumb:hover {
  @apply bg-zinc-500 dark:bg-zinc-500;
}

/* Smooth transitions */
.transition-theme {
  @apply transition-colors duration-200;
}

/* Focus ring */
.focus-ring {
  @apply focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2;
}

/* Prose styling for markdown */
.prose {
  line-height: 1.6;
}

.prose p {
  margin-bottom: 0.75em;
}

.prose p:last-child {
  margin-bottom: 0;
}

.prose ul {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  padding-left: 1.5em;
  list-style-type: disc;
}

.prose ol {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  padding-left: 1.5em;
  list-style-type: decimal;
}

.prose li {
  margin-bottom: 0.25em;
}

.prose pre {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: break-word;
}

.prose blockquote {
  border-left: 3px solid hsl(var(--border));
  padding-left: 1em;
  margin: 0.5em 0;
  color: hsl(var(--muted-foreground));
}

.ai-avatar {
}

.dark .ai-avatar img {
  filter: invert(1);
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.5em 0;
}

.prose th,
.prose td {
  border: 1px solid hsl(var(--border));
  padding: 0.5em;
  text-align: left;
}

.dark .prose th,
.dark .prose td {
  border-color: hsl(30 8% 38%);
}

.prose th {
  background: hsl(var(--muted));
}

/* Typing indicator animation */
@keyframes bounce {
  0%,
  60%,
  100% {
    transform: translateY(0);
  }

  30% {
    transform: translateY(-4px);
  }
}

/* ── Chat Scroll Performance ── */

/* Scroll container: use GPU compositing */
[data-chat-scroll] {
  will-change: scroll-position;
}

/* Code Block Styles */
.code-block-wrapper {
  position: relative;
  border-radius: 0.75rem;
  overflow: hidden;
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card));
  margin: 0.5em 0;
}

.code-block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  background: hsl(var(--muted));
  border-bottom: 1px solid hsl(var(--border));
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
}

.code-block-lang {
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.025em;
  font-size: 0.6875rem;
}

.code-block-copy-btn {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  border-radius: 0.375rem;
  font-size: 0.6875rem;
  color: hsl(var(--muted-foreground));
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
}

.code-block-copy-btn:hover {
  color: hsl(var(--foreground));
  background: hsl(var(--background) / 0.5);
}

.code-block-content {
  position: relative;
  overflow-x: auto;
  /* Let shiki theme backgrounds control code area for proper token contrast */
  background: transparent;
}

.code-block-with-line-numbers {
  display: flex;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.8125rem;
  line-height: 1.5;
}

.line-numbers {
  flex-shrink: 0;
  padding: 1rem 0.75rem;
  text-align: right;
  /* Dim but visible line numbers */
  color: hsl(var(--foreground) / 0.35);
  background: transparent;
  border-right: 1px solid hsl(var(--border));
  user-select: none;
}

.line-number {
  display: block;
  min-width: 1.5rem;
}

.code-content {
  flex: 1;
  padding: 1rem;
  overflow-x: auto;
}

.code-content code,
.code-content .shiki code {
  word-break: break-all;
  white-space: pre-wrap;
}

/* Force code lines to wrap */
.code-content .line {
  white-space: pre-wrap;
  word-break: break-all;
}

.code-content pre {
  margin: 0;
  padding: 0;
}

.code-content code {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  background: transparent !important;
}

/* Shiki theme visibility */
.shiki-light {
  display: block;
}

.shiki-dark {
  display: none;
}

.dark .shiki-light {
  display: none;
}

.dark .shiki-dark {
  display: block;
}

/* Fallback code styling */
.shiki-fallback {
  display: block;
  white-space: pre;
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

/* Let shiki themes control their own background for proper token contrast */
.code-content .shiki {
  border-radius: 0;
}

.code-content .shiki code {
  background: transparent !important;
}

/* Inline code within prose */
.prose code {
  background: transparent;
  font-weight: 500;
}

/* ── Streamdown code block overrides ── */

/* No-language code blocks: flat style, no card wrapper */
[data-streamdown="code-block"][data-language=""] {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  gap: 0 !important;
}

/* Hide the empty header for no-language blocks */
[data-streamdown="code-block"][data-language=""] [data-streamdown="code-block-header"] {
  display: none !important;
}

/* Remove border from code body for no-language blocks */
[data-streamdown="code-block"][data-language=""] [data-streamdown="code-block-body"] {
  border: none !important;
  border-radius: 0 !important;
  padding: 0.5rem 0 !important;
  background: transparent !important;
}

/* ── Language-tagged code blocks: compact header, no extra gap ── */

/* Compact language header */
[data-streamdown="code-block-header"] {
  height: 1.5rem !important;
  min-height: 1.5rem !important;
  padding: 0 0.25rem !important;
}

[data-streamdown="code-block-header"] span {
  font-size: 0.625rem !important;
}

/* Reduce gap between header and code body */
[data-streamdown="code-block"]:not([data-language=""]) {
  gap: 0 !important;
}

/* ── Code block action buttons: bottom-right, small, no border box ── */

/* Make code-block container the positioning context */
[data-streamdown="code-block"] {
  position: relative !important;
}

/* Reposition the sticky actions wrapper to bottom-right */
[data-streamdown="code-block"] > :has([data-streamdown="code-block-actions"]) {
  position: absolute !important;
  bottom: calc(0.375rem + 5px) !important;
  right: calc(0.375rem + 5px) !important;
  top: auto !important;
  margin-top: 0 !important;
  height: auto !important;
  z-index: 10 !important;
  pointer-events: auto !important;
}

/* Remove the border box around buttons */
[data-streamdown="code-block-actions"] {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  backdrop-filter: none !important;
  gap: 0.25rem !important;
}

/* Buttons: subtle until hover */
[data-streamdown="code-block-actions"] button {
  padding: 0.25rem !important;
  opacity: 0.35;
  transition: opacity 0.15s ease;
}

[data-streamdown="code-block-actions"] button:hover {
  opacity: 1;
}

/* Button icon size */
[data-streamdown="code-block-copy-button"] svg,
[data-streamdown="code-block-download-button"] svg {
  width: 14px !important;
  height: 14px !important;
}

/* ── Code Block Collapse ── */

[data-streamdown="code-block-body"] {
  transition: max-height 0.2s ease-out;
}

/* Gradient fade at bottom of collapsed code blocks */
[data-streamdown="code-block-body"][data-collapsed="true"]::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 48px;
  background: linear-gradient(transparent, hsl(var(--card)));
  pointer-events: none;
  z-index: 5;
}

/* No-language blocks: transparent gradient */
[data-streamdown="code-block"][data-language=""] [data-streamdown="code-block-body"][data-collapsed="true"]::after {
  background: linear-gradient(transparent, hsl(var(--background)));
}

/* Collapse toggle button — sits in code-block-actions alongside copy/download */
.code-collapse-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem !important;
  opacity: 0.35;
  cursor: pointer;
  background: transparent;
  border: none;
  color: hsl(var(--muted-foreground));
  transition: opacity 0.15s ease;
}

.code-collapse-toggle:hover {
  opacity: 1;
  color: hsl(var(--foreground));
}

/* CodeMirror editor — JetBrains Mono */
.cm-editor .cm-content,
.cm-editor .cm-gutters,
.cm-editor .cm-line {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace !important;
}

/* Git diff — JetBrains Mono for code lines */
.git-diff-content {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.8125rem;
  line-height: 1.5;
}

/* Achievement card shine sweep - warm gold (light) / muted silver (dark) */
.achievement-shine {
  background: linear-gradient(
    105deg,
    transparent 25%,
    rgba(255, 255, 255, 0.0) 35%,
    rgba(255, 255, 255, 0.6) 44%,
    rgba(255, 248, 230, 0.8) 48%,
    rgba(255, 255, 255, 0.6) 52%,
    rgba(255, 255, 255, 0.0) 61%,
    transparent 71%
  );
  filter: drop-shadow(0 0 8px rgba(245, 158, 11, 0.3));
}

.dark .achievement-shine {
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(180, 180, 200, 0.08) 40%,
    rgba(200, 200, 220, 0.18) 48%,
    rgba(180, 180, 200, 0.08) 56%,
    transparent 66%
  );
  filter: none;
}

/* Achievement card glow - gold warm (light) / dim neon (dark) */
.achievement-glow {
  box-shadow:
    inset 0 0 30px rgba(255, 255, 255, 0.4),
    0 0 20px -3px rgba(245, 158, 11, 0.2);
}

.dark .achievement-glow {
  box-shadow:
    inset 0 0 20px rgba(0, 255, 255, 0.03),
    0 0 15px -5px rgba(0, 255, 255, 0.06);
}
