clawtap/src/index.css

@import 'tailwindcss';
@plugin '@tailwindcss/typography';

@theme {
  --color-bg: #09090b;
  --color-surface: #18181b;
  --color-surface-light: #27272a;
  --color-border: #3f3f46;
  --color-accent: #22c55e;
  --color-accent-light: #4ade80;
  --color-accent-glow: rgba(34, 197, 94, 0.15);
  --color-user-bubble: rgba(5, 46, 22, 0.8);
  --color-user-bubble-text: #4ade80;
  --color-text: #fafafa;
  --color-text-secondary: #a1a1aa;
  --color-text-dim: #71717a;
  --color-success: #22c55e;
  --color-danger: #ef4444;
  --color-warning: #eab308;
  --color-surface-hover: #1f1f23;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

@keyframes shimmer {
  0% { background-position: 200% center; }
  100% { background-position: -200% center; }
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

@keyframes pulse-dot {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}

.shimmer-text {
  background: linear-gradient(90deg, #22c55e, #22d3ee, #a78bfa, #22c55e);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 2s linear infinite;
}

.cursor-blink::after {
  content: '\258b';
  animation: blink 1s step-end infinite;
  color: var(--color-accent);
}

.typing-dot {
  animation: pulse-dot 1.4s infinite ease-in-out both;
}
.typing-dot:nth-child(2) { animation-delay: 0.16s; }
.typing-dot:nth-child(3) { animation-delay: 0.32s; }

.safe-bottom {
  padding-bottom: max(12px, env(safe-area-inset-bottom));
}

.safe-top {
  padding-top: env(safe-area-inset-top);
}

.safe-x {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

input, textarea, select {
  font-size: 16px;
}

/* Review panel uses smaller text to fit the compact layout.
   16px stays on main input to prevent iOS Safari auto-zoom. */
.review-panel-compact textarea {
  font-size: 14px;
}

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 2px; }

/* ClawTap loading — SVG pixel claw walks right, pincers pivot from root */
.claw-svg {
  filter: drop-shadow(0 0 4px rgba(34, 197, 94, 0.3));
}

.claw-pincer-top {
  transform-origin: 3px 2px;
  animation: claw-pivot-top 0.4s ease-in-out infinite;
}
.claw-pincer-bot {
  transform-origin: 3px 4px;
  animation: claw-pivot-bot 0.4s ease-in-out infinite;
}

@keyframes claw-pivot-top {
  0%, 100% { transform: rotate(-12deg); }
  50% { transform: rotate(0deg); }
}
@keyframes claw-pivot-bot {
  0%, 100% { transform: rotate(12deg); }
  50% { transform: rotate(0deg); }
}

.claw-walk {
  animation: claw-walk 2.2s linear infinite;
}
@keyframes claw-walk {
  0% { transform: translateX(-24px); }
  100% { transform: translateX(8px); }
}

.claw-dot {
  animation: claw-dot-eat 2.2s ease-in-out infinite;
}
@keyframes claw-dot-eat {
  0%, 50% { opacity: 0.5; transform: scale(1); }
  65% { opacity: 0; transform: scale(0); }
  80%, 100% { opacity: 0.5; transform: scale(1); }
}

/* ClawTap logo float */
.claw-float {
  animation: claw-float 3s ease-in-out infinite;
}
@keyframes claw-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* Terminal glow effect */
.text-glow {
  text-shadow: 0 0 8px var(--color-accent-glow);
}

@keyframes slideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}