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

@layer base {
  /* ── Light mode ── */
  :root {
    --background: 0 0% 100%;
    --foreground: 26 24% 12%;
    --primary: 38 86% 64%;
    --primary-foreground: 0 0% 100%;
    --secondary: 30 14% 93%;
    --secondary-foreground: 26 24% 12%;
    --muted: 30 14% 93%;
    --muted-foreground: 0 0% 42%;
    --accent: 30 14% 93%;
    --accent-foreground: 26 24% 12%;
    --destructive: 0 64% 57%;
    --destructive-foreground: 0 0% 100%;
    --border: 30 8% 85%;
    --input: 30 8% 85%;
    --ring: 38 86% 64%;
    --radius: 0.5rem;
    --sidebar-background: 30 10% 96%;
    --sidebar-foreground: 26 24% 12%;
    --sidebar-primary: 38 86% 64%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 30 14% 90%;
    --sidebar-accent-foreground: 26 24% 12%;
    --sidebar-border: 30 8% 88%;
    --popover: 0 0% 100%;
    --popover-foreground: 26 24% 12%;
    --sidebar-ring: 38 86% 64%;
  }

  /* ── Dark mode (primary) ── */
  .dark {
    --background: 0 0% 7.1%;
    --foreground: 0 0% 93%;
    --primary: 38 86% 64%;
    --primary-foreground: 0 0% 7.1%;
    --secondary: 0 0% 15.7%;
    --secondary-foreground: 0 0% 93%;
    --muted: 0 0% 15.7%;
    --muted-foreground: 0 0% 54.5%;
    --accent: 0 0% 15.7%;
    --accent-foreground: 0 0% 93%;
    --destructive: 0 64% 57%;
    --destructive-foreground: 0 0% 93%;
    --border: 0 0% 24.7%;
    --input: 0 0% 24.7%;
    --ring: 35 93% 77%;
    --sidebar-background: 26 24% 12%;
    --sidebar-foreground: 0 0% 93%;
    --sidebar-primary: 38 86% 64%;
    --sidebar-primary-foreground: 0 0% 7.1%;
    --sidebar-accent: 26 15% 20%;
    --sidebar-accent-foreground: 0 0% 93%;
    --sidebar-border: 26 10% 18%;
    --popover: 0 0% 12.9%;
    --popover-foreground: 0 0% 93%;
    --sidebar-ring: 38 86% 64%;
  }

  /* ── Neutral scheme: light ── */
  .scheme-neutral {
    --background: 0 0% 100%;
    --foreground: 0 0% 9%;
    --secondary: 0 0% 96%;
    --secondary-foreground: 0 0% 9%;
    --muted: 0 0% 96%;
    --muted-foreground: 0 0% 38%;
    --accent: 0 0% 96%;
    --accent-foreground: 0 0% 9%;
    --border: 0 0% 88%;
    --input: 0 0% 88%;
    --popover: 0 0% 100%;
    --popover-foreground: 0 0% 9%;
    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 0 0% 9%;
    --sidebar-accent: 0 0% 93%;
    --sidebar-accent-foreground: 0 0% 9%;
    --sidebar-border: 0 0% 90%;
  }

  /* ── Neutral scheme: dark ── */
  .dark.scheme-neutral {
    --background: 0 0% 8%;
    --foreground: 0 0% 95%;
    --secondary: 0 0% 16%;
    --secondary-foreground: 0 0% 95%;
    --muted: 0 0% 16%;
    --muted-foreground: 0 0% 62%;
    --accent: 0 0% 16%;
    --accent-foreground: 0 0% 95%;
    --border: 0 0% 22%;
    --input: 0 0% 22%;
    --popover: 0 0% 12%;
    --popover-foreground: 0 0% 95%;
    --sidebar-background: 0 0% 11%;
    --sidebar-foreground: 0 0% 95%;
    --sidebar-accent: 0 0% 18%;
    --sidebar-accent-foreground: 0 0% 95%;
    --sidebar-border: 0 0% 18%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
    font-family:
      -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB",
      "Microsoft YaHei", "Noto Sans CJK SC", "Source Han Sans SC", "WenQuanYi Micro Hei", sans-serif;
  }
}

/* Animations */
@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slide-up {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(-100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes toast-out {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-100%);
  }
}

@keyframes pulse-bar {
  0%,
  100% {
    opacity: 0.4;
  }
  50% {
    opacity: 1;
  }
}

.animate-fade-in {
  animation: fade-in 0.25s ease-out both;
}

.animate-slide-up {
  animation: slide-up 0.3s ease-out both;
}

.animate-toast-in {
  animation: toast-in 0.3s ease-out both;
}

.animate-toast-out {
  animation: toast-out 0.25s ease-in both;
}

/* Spin animation */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.animate-spin {
  animation: spin 1s linear infinite;
}

/* Thinking dots */
@keyframes thinking-bounce {
  0%,
  80%,
  100% {
    opacity: 0.25;
    transform: scale(0.8);
  }
  40% {
    opacity: 1;
    transform: scale(1);
  }
}
.thinking-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: hsl(var(--muted-foreground));
  animation: thinking-bounce 1.2s ease-in-out infinite;
}

/* Spinner star — pulse between dim and bright */
.spinner-star {
  display: inline-block;
  animation: star-pulse 2s ease-in-out infinite alternate;
  font-size: 0.75rem;
  color: hsl(var(--primary));
}
@keyframes star-pulse {
  0% {
    opacity: 0.4;
    transform: scale(0.85);
  }
  100% {
    opacity: 1;
    transform: scale(1.1);
  }
}

/* Spinner shimmer — gradient sweep across text */
.spinner-shimmer {
  background: linear-gradient(
    90deg,
    hsl(var(--primary) / 0.6) 0%,
    hsl(var(--primary)) 40%,
    hsl(var(--primary) / 0.6) 80%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer-slide 3s ease-in-out infinite;
}
@keyframes shimmer-slide {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: -100% 0;
  }
}

/* Card hover effect */
.card-hover {
  transition:
    box-shadow 0.2s ease,
    border-color 0.2s ease;
}
.card-hover:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border-color: hsl(var(--ring) / 0.3);
}
.dark .card-hover:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Prose for chat */
.prose-chat {
  font-size: 0.875rem;
  line-height: 1.625;
}
/* Inline code (not code blocks — those are reset by .code-block pre code) */
.prose-chat code {
  font-size: 0.8125rem;
  background: hsl(var(--muted) / 0.7);
  padding: 0.15em 0.4em;
  border-radius: 0.25rem;
  color: hsl(var(--foreground));
}
.dark .prose-chat code {
  background: hsl(0 0% 18%);
  color: hsl(35 90% 72%);
}
.prose-chat p {
  margin: 0.375rem 0;
}
.prose-chat p:first-child {
  margin-top: 0;
}
.prose-chat p:last-child {
  margin-bottom: 0;
}

/* Headings */
.prose-chat h1 {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 1.5rem 0 0.5rem;
  padding-bottom: 0.375rem;
  border-bottom: 1px solid hsl(var(--border));
  color: hsl(var(--foreground));
}
.prose-chat h2 {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 1.25rem 0 0.375rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid hsl(var(--border) / 0.5);
  color: hsl(var(--foreground));
}
.prose-chat h3 {
  font-size: 1rem;
  font-weight: 600;
  margin: 1rem 0 0.25rem;
  color: hsl(var(--foreground));
}
.prose-chat h4 {
  font-size: 0.875rem;
  font-weight: 600;
  margin: 0.75rem 0 0.25rem;
  color: hsl(var(--muted-foreground));
}
/* No extra top margin when heading is first child */
.prose-chat > h1:first-child,
.prose-chat > h2:first-child,
.prose-chat > h3:first-child,
.prose-chat > h4:first-child {
  margin-top: 0;
}

/* Lists */
.prose-chat ul,
.prose-chat ol {
  padding-left: 1.5rem;
  margin: 0.5rem 0;
}
.prose-chat li {
  margin: 0.25rem 0;
}
.prose-chat li::marker {
  color: hsl(var(--muted-foreground));
}
/* Nested marker style progression */
.prose-chat ul > li {
  list-style-type: disc;
}
.prose-chat ul ul > li {
  list-style-type: circle;
}
.prose-chat ul ul ul > li {
  list-style-type: square;
}
/* Tighter spacing for nested lists */
.prose-chat li > ul,
.prose-chat li > ol {
  margin: 0.125rem 0;
}

/* Blockquote */
.prose-chat blockquote {
  border-left: 3px solid hsl(var(--primary) / 0.5);
  background: hsl(var(--muted) / 0.3);
  padding: 0.625rem 1rem;
  margin: 0.75rem 0;
  border-radius: 0 0.375rem 0.375rem 0;
}
.prose-chat blockquote p {
  margin: 0.25rem 0;
}

/* Horizontal rule */
.prose-chat hr {
  border: none;
  height: 1px;
  background: linear-gradient(to right, transparent, hsl(var(--border)), transparent);
  margin: 1.5rem 0;
}

/* Task list checkbox */
.prose-chat input[type="checkbox"] {
  appearance: none;
  width: 1rem;
  height: 1rem;
  border: 1.5px solid hsl(var(--border));
  border-radius: 0.25rem;
  background: transparent;
  vertical-align: middle;
  margin-right: 0.375rem;
  position: relative;
}
.prose-chat input[type="checkbox"]:checked {
  background: hsl(var(--primary));
  border-color: hsl(var(--primary));
}
.prose-chat input[type="checkbox"]:checked::after {
  content: "\2713";
  position: absolute;
  color: hsl(var(--primary-foreground));
  font-size: 0.7rem;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Table wrapper (rounded container + zebra stripes + horizontal scroll) */
.table-wrapper {
  overflow-x: auto;
  margin: 0.75rem 0;
  border: 1px solid hsl(var(--border) / 0.5);
  border-radius: 0.5rem;
}
.table-wrapper table {
  margin: 0;
  width: 100%;
  border-collapse: collapse;
  border: none;
}
.table-wrapper th {
  background: hsl(var(--muted) / 0.6);
  font-weight: 600;
  text-align: left;
}
.table-wrapper td,
.table-wrapper th {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid hsl(var(--border) / 0.3);
  font-size: 0.8125rem;
}
.table-wrapper tbody tr:last-child td {
  border-bottom: none;
}
.table-wrapper tbody tr:nth-child(even) {
  background: hsl(var(--muted) / 0.15);
}

/* Code block container (ChatGPT/Claude style) */
.code-block {
  border-radius: 0.375rem;
  overflow: hidden;
  margin: 0.375rem 0;
  background: hsl(var(--muted) / 0.5);
  border: 1px solid hsl(var(--border) / 0.5);
}
.code-block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.2rem 0.625rem;
  background: hsl(var(--muted) / 0.8);
}
.code-block-lang {
  font-size: 0.6875rem;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
}
.code-block-copy {
  font-size: 0.6875rem;
  color: hsl(var(--muted-foreground));
  cursor: pointer;
  padding: 0.0625rem 0.375rem;
  border-radius: 0.25rem;
  transition:
    color 0.15s,
    background-color 0.15s;
  background: transparent;
  border: none;
  font-family: inherit;
}
.code-block-copy:hover {
  color: hsl(var(--foreground));
  background: hsl(var(--accent));
}
.code-block-copy.copied {
  color: hsl(142 71% 45%);
}
.code-block pre {
  margin: 0;
  padding: 0.5rem 0.75rem;
  border-radius: 0;
  background: transparent;
  overflow-x: auto;
  font-size: 0.8125rem;
  line-height: 1.45;
}
.code-block pre code {
  background: transparent;
  padding: 0;
  border-radius: 0;
  font-size: inherit;
}

/* Tool terminal output (Bash, shell commands) */
.tool-terminal {
  background: hsl(0 0% 5%);
  color: hsl(0 0% 85%);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.8125rem;
  line-height: 1.5;
  padding: 0.75rem 1rem;
  border-radius: 0.375rem;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
}

/* Diff view (Edit tool) */
.diff-section {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.8125rem;
  line-height: 1.6;
  border-radius: 0.375rem;
  overflow: hidden;
}
.diff-removed {
  background: hsl(0 60% 50% / 0.12);
  color: hsl(0 70% 65%);
}
.dark .diff-removed {
  background: hsl(0 60% 50% / 0.15);
  color: hsl(0 70% 72%);
}
.diff-added {
  background: hsl(142 60% 45% / 0.12);
  color: hsl(142 60% 40%);
}
.dark .diff-added {
  background: hsl(142 60% 45% / 0.15);
  color: hsl(142 60% 65%);
}

/* Diff table (structuredPatch + fallback) */
.diff-table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.8125rem;
  line-height: 1.6;
}
.diff-gutter {
  width: 4ch;
  min-width: 4ch;
  text-align: right;
  padding-right: 0.5ch;
  color: hsl(var(--muted-foreground) / 0.5);
  user-select: none;
  vertical-align: top;
  white-space: nowrap;
}
.diff-sign {
  width: 2ch;
  min-width: 2ch;
  text-align: center;
  font-weight: 600;
  user-select: none;
  vertical-align: top;
  white-space: nowrap;
}
.diff-sign-del {
  color: hsl(0 70% 60%);
}
.diff-sign-add {
  color: hsl(142 60% 50%);
}
.diff-code {
  white-space: pre;
  padding-left: 0.5ch;
}
/* Row backgrounds */
.diff-row-removed td {
  background: hsl(0 60% 50% / 0.12);
}
.diff-row-removed .diff-code {
  color: hsl(0 70% 65%);
}
.dark .diff-row-removed td {
  background: hsl(0 60% 50% / 0.15);
}
.dark .diff-row-removed .diff-code {
  color: hsl(0 70% 72%);
}
.diff-row-added td {
  background: hsl(142 60% 45% / 0.12);
}
.diff-row-added .diff-code {
  color: hsl(142 60% 40%);
}
.dark .diff-row-added td {
  background: hsl(142 60% 45% / 0.15);
}
.dark .diff-row-added .diff-code {
  color: hsl(142 60% 65%);
}
.diff-row-context .diff-code {
  color: hsl(var(--foreground));
  opacity: 0.7;
}

/* Line numbers in code/tool views */
.tool-line-num {
  display: inline-block;
  width: 3ch;
  text-align: right;
  color: hsl(var(--muted-foreground) / 0.5);
  margin-right: 1rem;
  user-select: none;
  font-size: 0.75rem;
}

/* File path header for tool output */
.tool-file-header {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
  padding: 0.25rem 0.75rem;
  background: hsl(var(--muted) / 0.6);
  border-bottom: 1px solid hsl(var(--border) / 0.5);
}

/* Content-visibility optimization: skip layout/paint for off-screen entries.
 * Note: `content-visibility: auto` already implies layout/style/paint containment
 * dynamically (size containment when off-screen, normal when on-screen). Declaring
 * `contain` explicitly overrides this dynamic behavior and was observed to cause
 * 2.5s style recalc storms on click in WKWebView. Let the browser manage it. */
.cv-auto {
  content-visibility: auto;
  contain-intrinsic-size: auto 300px;
}

/* Scrollbar-hide utility (for horizontal pill rows) */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar {
  display: none;
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  @apply bg-muted-foreground/20 rounded-full;
}
::-webkit-scrollbar-thumb:hover {
  @apply bg-muted-foreground/40;
}

/* Code block — dark mode deeper backgrounds (terminal-like) */
.dark .code-block {
  background: hsl(var(--muted));
  border-color: transparent;
}
.dark .code-block-header {
  background: hsl(var(--muted) / 0.8);
}

/* Diff section — dark mode deeper background */
.dark .diff-section {
  background: hsl(0 0% 8%);
}

/* Tool code containers — darker in dark mode (Read, Write new-file, etc.) */
.dark .tool-code-block {
  background: hsl(0 0% 8%) !important;
}

/* Override highlight.js theme background to blend with app chrome */
pre code.hljs,
code.hljs {
  background: transparent;
}

/* CodeMirror 6 theme integration
   style-mod may fail to inject CSS on some WebView engines (observed on
   Intel Mac WKWebView, Windows WebView2). All rules below serve as static
   fallbacks so CodeMirror renders correctly even when style-mod is absent. */
.cm-editor {
  display: flex !important;
  flex-direction: column !important;
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family:
    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  font-size: 13px;
  tab-size: 2;
  height: 100%;
}
.cm-editor .cm-scroller {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  flex: 1 1 0;
  min-height: 0;
  overflow: auto;
  position: relative;
}
.cm-editor .cm-gutters {
  background-color: hsl(var(--muted) / 0.4);
  border-right: 1px solid hsl(var(--border));
  color: hsl(var(--muted-foreground));
}
.cm-editor .cm-lineNumbers .cm-gutterElement {
  padding-right: 12px;
  padding-left: 8px;
}
.cm-editor .cm-activeLineGutter {
  background-color: hsl(var(--muted) / 0.65);
}
.cm-editor .cm-activeLine {
  background-color: hsl(var(--muted) / 0.35);
}
.cm-editor .cm-content {
  display: block;
  flex-grow: 2;
  flex-shrink: 0;
  min-width: 0;
  margin: 0;
  padding: 4px 0 4px 8px;
  box-sizing: border-box;
  outline: none;
  white-space: pre-wrap;
  word-break: break-word;
  caret-color: transparent;
}
.cm-editor .cm-selectionLayer {
  z-index: -1;
  contain: size style;
}
.cm-editor .cm-cursorLayer {
  z-index: 100;
  contain: size style;
  pointer-events: none;
}
.cm-editor.cm-focused {
  outline: none;
}

/* Responsive chat content width — replaces fixed max-w-5xl */
@layer components {
  .chat-content-width {
    margin-left: auto;
    margin-right: auto;
    padding-left: 2rem;
    padding-right: 2rem;
    max-width: 64rem; /* 1024px baseline */
  }
}

@media (min-width: 1400px) {
  .chat-content-width {
    max-width: 72rem; /* 1152px — 14" MacBook starts benefiting */
  }
}

@media (min-width: 1600px) {
  .chat-content-width {
    max-width: 80rem; /* 1280px */
  }
}

@media (min-width: 1920px) {
  .chat-content-width {
    max-width: 92rem; /* 1472px */
  }
}
