@import "tailwindcss";
@import "tw-shimmer";

html, body {
  touch-action: pan-x pan-y;
}

/* Markdown rendering for Context tab DocView (and elsewhere). */
.prose-loopat {
  font-size: 14px;
  line-height: 1.65;
  color: #1f2937;
}
.prose-loopat h1 { font-size: 1.6em; font-weight: 600; margin: 1.2em 0 0.6em; line-height: 1.2; }
.prose-loopat h2 { font-size: 1.3em; font-weight: 600; margin: 1.1em 0 0.5em; line-height: 1.25; }
.prose-loopat h3 { font-size: 1.1em; font-weight: 600; margin: 1em 0 0.4em; }
.prose-loopat h4 { font-weight: 600; margin: 0.9em 0 0.3em; }
.prose-loopat p { margin: 0.7em 0; }
.prose-loopat ul, .prose-loopat ol { margin: 0.7em 0; padding-left: 1.3em; }
.prose-loopat ul li { list-style: disc; margin: 0.2em 0; }
.prose-loopat ol li { list-style: decimal; margin: 0.2em 0; }
.prose-loopat blockquote {
  border-left: 3px solid #d1d5db;
  padding-left: 0.8em;
  color: #4b5563;
  margin: 0.8em 0;
}
.prose-loopat code:not(pre code) {
  background: #f3f4f6;
  padding: 0.1em 0.35em;
  border-radius: 3px;
  font-family: ui-monospace, monospace;
  font-size: 0.88em;
}
.prose-loopat pre {
  background: #f6f8fa;
  padding: 0.8em 1em;
  border-radius: 6px;
  overflow-x: auto;
  margin: 0.8em 0;
  font-size: 12.5px;
  line-height: 1.5;
}
.prose-loopat pre code {
  background: transparent;
  padding: 0;
  border-radius: 0;
}
.prose-loopat table {
  border-collapse: collapse;
  margin: 0.8em 0;
}
.prose-loopat th, .prose-loopat td {
  border: 1px solid #e5e7eb;
  padding: 0.4em 0.7em;
  text-align: left;
}
.prose-loopat th { background: #f9fafb; font-weight: 600; }
.prose-loopat hr { border: none; border-top: 1px solid #e5e7eb; margin: 1.5em 0; }

/* ─── Chat dot animations ─── */
@keyframes blink-green {
  0%, 100% { background-color: #22c55e; }
  50% { background-color: #bbf7d0; }
}

/* ─── ClaudeStatus morphing icon ─── */
@keyframes morph {
  0%, 100% {
    border-radius: 50% 50% 60% 40%;
    background-color: #3b82f6;
    transform: scale(1);
  }
  25% {
    border-radius: 40% 60% 50% 50%;
    background-color: #6366f1;
    transform: scale(1.15);
  }
  50% {
    border-radius: 55% 45% 40% 60%;
    background-color: #8b5cf6;
    transform: scale(0.9);
  }
  75% {
    border-radius: 45% 55% 60% 40%;
    background-color: #6366f1;
    transform: scale(1.1);
  }
}

@keyframes glow {
  0%, 100% { opacity: 0.3; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(1.8); }
}

/* ─── User message gradient fade (collapsed state) ─── */
.user-msg-fade {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2rem;
  background: linear-gradient(to top, #fff 0%, transparent 100%);
  pointer-events: none;
}

@layer base {
  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; height: 100%; }
  #root { margin: 0; padding: 0; height: 100%; }
  body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    font-size: 14px;
    color: #1a1a1a;
    background: #fafafa;
  }
  button {
    font: inherit;
    cursor: pointer;
  }
  input, textarea {
    font: inherit;
  }
}