/* ═══════════════════════════════════════════════════════
   MyClaw App Theme — Dark Premium Design System
   Standalone CSS for all custom utilities that Tailwind
   standalone binary may not compile from ERB files.
   ═══════════════════════════════════════════════════════ */

:root {
  --mc-bg: #09090b;
  --mc-bg-raised: #111113;
  --mc-bg-sidebar: #0c0c0e;
  --mc-fg: #fafafa;
  --mc-muted: #18181b;
  --mc-muted-fg: #71717a;
  --mc-muted-light: #a1a1aa;
  --mc-border: #27272a;
  --mc-border-subtle: #1e1e21;
  --mc-dark-zinc: #3f3f46;
  --mc-green: #22c55e;
  --mc-blue: #3b82f6;
  --mc-purple: #a78bfa;
  --mc-purple-light: #c4b5fd;
  --mc-amber: #f59e0b;
  --mc-red: #ef4444;
  --mc-pink: #ec4899;
  --mc-cyan: #06b6d4;
}

/* ===== BACKGROUND COLORS ===== */
.bg-mc-bg { background-color: var(--mc-bg); }
.bg-mc-bg-raised { background-color: var(--mc-bg-raised); }
.bg-mc-bg-sidebar { background-color: var(--mc-bg-sidebar); }
.bg-mc-fg { background-color: var(--mc-fg); }
.bg-mc-muted { background-color: var(--mc-muted); }
.bg-mc-muted-fg { background-color: var(--mc-muted-fg); }
.bg-mc-border { background-color: var(--mc-border); }
.bg-mc-border-subtle { background-color: var(--mc-border-subtle); }
.bg-mc-dark-zinc { background-color: var(--mc-dark-zinc); }
.bg-mc-green { background-color: var(--mc-green); }
.bg-mc-blue { background-color: var(--mc-blue); }
.bg-mc-purple { background-color: var(--mc-purple); }
.bg-mc-amber { background-color: var(--mc-amber); }
.bg-mc-red { background-color: var(--mc-red); }
.bg-mc-pink { background-color: var(--mc-pink); }

/* Background with opacity */
.bg-mc-green\/10 { background-color: rgb(34 197 94 / 0.1); }
.bg-mc-green\/80 { background-color: rgb(34 197 94 / 0.8); }
.bg-mc-blue\/10 { background-color: rgb(59 130 246 / 0.1); }
.bg-mc-blue\/20 { background-color: rgb(59 130 246 / 0.2); }
.bg-mc-blue\/80 { background-color: rgb(59 130 246 / 0.8); }
.bg-mc-purple\/10 { background-color: rgb(167 139 250 / 0.1); }
.bg-mc-purple\/20 { background-color: rgb(167 139 250 / 0.2); }
.bg-mc-purple\/25 { background-color: rgb(167 139 250 / 0.25); }
.bg-mc-amber\/10 { background-color: rgb(245 158 11 / 0.1); }
.bg-mc-red\/10 { background-color: rgb(239 68 68 / 0.1); }
.bg-mc-pink\/10 { background-color: rgb(236 72 153 / 0.1); }
.bg-mc-muted\/80 { background-color: rgb(24 24 27 / 0.8); }

/* Hover backgrounds */
.hover\:bg-mc-muted:hover { background-color: var(--mc-muted); }
.hover\:bg-mc-blue\/80:hover { background-color: rgb(59 130 246 / 0.8); }
.hover\:bg-mc-blue\/20:hover { background-color: rgb(59 130 246 / 0.2); }
.hover\:bg-mc-green\/80:hover { background-color: rgb(34 197 94 / 0.8); }
.hover\:bg-mc-bg:hover { background-color: var(--mc-bg); }
.hover\:bg-mc-bg-raised:hover { background-color: var(--mc-bg-raised); }

/* ===== TEXT COLORS ===== */
.text-mc-fg { color: var(--mc-fg); }
.text-mc-muted-fg { color: var(--mc-muted-fg); }
.text-mc-muted-light { color: var(--mc-muted-light); }
.text-mc-dark-zinc { color: var(--mc-dark-zinc); }
.text-mc-green { color: var(--mc-green); }
.text-mc-blue { color: var(--mc-blue); }
.text-mc-purple { color: var(--mc-purple); }
.text-mc-purple-light { color: var(--mc-purple-light); }
.text-mc-amber { color: var(--mc-amber); }
.text-mc-red { color: var(--mc-red); }
.text-mc-bg { color: var(--mc-bg); }

/* Hover text */
.hover\:text-mc-fg:hover { color: var(--mc-fg); }
.hover\:text-mc-muted-light:hover { color: var(--mc-muted-light); }
.hover\:text-mc-red:hover { color: var(--mc-red); }
.hover\:text-mc-blue\/80:hover { color: rgb(59 130 246 / 0.8); }
.hover\:text-mc-purple-light:hover { color: var(--mc-purple-light); }
.hover\:text-mc-purple:hover { color: var(--mc-purple); }

/* ===== BORDER COLORS ===== */
.border-mc-border { border-color: var(--mc-border); }
.border-mc-border-subtle { border-color: var(--mc-border-subtle); }
.border-mc-muted-fg { border-color: var(--mc-muted-fg); }
.border-mc-purple { border-color: var(--mc-purple); }
.border-mc-blue { border-color: var(--mc-blue); }
.border-mc-blue\/30 { border-color: rgb(59 130 246 / 0.3); }
.border-mc-purple\/20 { border-color: rgb(167 139 250 / 0.2); }

/* Hover borders */
.hover\:border-mc-border:hover { border-color: var(--mc-border); }
.hover\:border-mc-muted-fg:hover { border-color: var(--mc-muted-fg); }
.hover\:border-mc-purple:hover { border-color: var(--mc-purple); }

/* Focus borders */
.focus\:border-mc-purple:focus { border-color: var(--mc-purple); }
.focus\:border-mc-blue:focus { border-color: var(--mc-blue); }

/* ===== GRADIENT COLORS ===== */
.from-mc-purple { --tw-gradient-from: var(--mc-purple); }
.from-mc-blue { --tw-gradient-from: var(--mc-blue); }
.from-mc-green { --tw-gradient-from: var(--mc-green); }
.from-mc-amber { --tw-gradient-from: var(--mc-amber); }
.from-mc-pink { --tw-gradient-from: var(--mc-pink); }

.to-mc-blue { --tw-gradient-to: var(--mc-blue); }
.to-mc-purple { --tw-gradient-to: var(--mc-purple); }
.to-mc-green { --tw-gradient-to: var(--mc-green); }
.to-mc-red { --tw-gradient-to: var(--mc-red); }

/* Gradient with opacity */
.from-mc-amber\/10 { --tw-gradient-from: rgb(245 158 11 / 0.1); }
.from-mc-red\/5 { --tw-gradient-from: rgb(239 68 68 / 0.05); }
.from-mc-blue\/10 { --tw-gradient-from: rgb(59 130 246 / 0.1); }
.from-mc-blue\/\[0\.12\] { --tw-gradient-from: rgb(59 130 246 / 0.12); }
.from-mc-purple\/5 { --tw-gradient-from: rgb(167 139 250 / 0.05); }
.from-mc-purple\/10 { --tw-gradient-from: rgb(167 139 250 / 0.1); }
.from-mc-purple\/\[0\.12\] { --tw-gradient-from: rgb(167 139 250 / 0.12); }
.from-mc-green\/10 { --tw-gradient-from: rgb(34 197 94 / 0.1); }
.from-mc-green\/\[0\.12\] { --tw-gradient-from: rgb(34 197 94 / 0.12); }
.from-mc-pink\/10 { --tw-gradient-from: rgb(236 72 153 / 0.1); }
.from-mc-cyan\/\[0\.06\] { --tw-gradient-from: rgb(6 182 212 / 0.06); }
.from-mc-muted-fg\/\[0\.12\] { --tw-gradient-from: rgb(113 113 122 / 0.12); }

.to-mc-red\/5 { --tw-gradient-to: rgb(239 68 68 / 0.05); }
.to-mc-blue\/5 { --tw-gradient-to: rgb(59 130 246 / 0.05); }
.to-mc-blue\/\[0\.06\] { --tw-gradient-to: rgb(59 130 246 / 0.06); }
.to-mc-blue\/\[0\.08\] { --tw-gradient-to: rgb(59 130 246 / 0.08); }
.to-mc-purple\/5 { --tw-gradient-to: rgb(167 139 250 / 0.05); }
.to-mc-purple\/\[0\.06\] { --tw-gradient-to: rgb(167 139 250 / 0.06); }
.to-mc-green\/\[0\.06\] { --tw-gradient-to: rgb(34 197 94 / 0.06); }
.to-mc-red\/\[0\.06\] { --tw-gradient-to: rgb(239 68 68 / 0.06); }
.to-mc-pink\/\[0\.06\] { --tw-gradient-to: rgb(236 72 153 / 0.06); }
.to-mc-dark-zinc\/\[0\.06\] { --tw-gradient-to: rgb(63 63 70 / 0.06); }

/* Gradient backgrounds (full shorthand for common patterns) */
.bg-gradient-to-br { background-image: linear-gradient(to bottom right, var(--tw-gradient-from), var(--tw-gradient-to)); }
.bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-from), var(--tw-gradient-to)); }

/* ===== SHADOW COLORS ===== */
.shadow-mc-purple\/20 { --tw-shadow-color: rgb(167 139 250 / 0.2); }
.shadow-mc-purple\/25 { --tw-shadow-color: rgb(167 139 250 / 0.25); }
.hover\:shadow-mc-purple\/30:hover { --tw-shadow-color: rgb(167 139 250 / 0.3); }

/* ===== RING / OUTLINE ===== */
.ring-mc-purple { --tw-ring-color: var(--mc-purple); }
.focus\:ring-mc-purple:focus { --tw-ring-color: var(--mc-purple); }

/* ===== PLACEHOLDER ===== */
.placeholder-mc-dark-zinc::placeholder { color: var(--mc-dark-zinc); }

/* ===== CUSTOM FONT SIZES ===== */
.text-\[28px\] { font-size: 28px; }
.text-\[22px\] { font-size: 22px; }
.text-\[15px\] { font-size: 15px; }
.text-\[13px\] { font-size: 13px; }
.text-\[11px\] { font-size: 11px; }
.text-\[10px\] { font-size: 10px; }

/* ===== CUSTOM BORDER RADIUS ===== */
.rounded-\[20px\] { border-radius: 20px; }
.rounded-\[16px\] { border-radius: 16px; }
.rounded-\[14px\] { border-radius: 14px; }
.rounded-\[12px\] { border-radius: 12px; }
.rounded-\[10px\] { border-radius: 10px; }
.rounded-\[8px\] { border-radius: 8px; }

/* ===== CUSTOM SIZES ===== */
.h-\[72px\] { height: 72px; }
.w-\[72px\] { width: 72px; }
.min-w-\[20px\] { min-width: 20px; }

/* ===== CUSTOM TRACKING ===== */
.tracking-\[1px\] { letter-spacing: 1px; }

/* ===== CUSTOM ANIMATIONS ===== */
@keyframes pulse-glow {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.animate-\[pulse_2s_infinite\] { animation: pulse-glow 2s infinite; }

/* ===== CUSTOM SHADOWS ===== */
.shadow-\[0_8px_32px_rgba\(0\2c 0\2c 0\2c 0\.25\)\] {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}
.hover\:shadow-\[0_8px_32px_rgba\(0\2c 0\2c 0\2c 0\.25\)\]:hover {
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}
.shadow-\[0_8px_24px_rgba\(167\2c 139\2c 250\2c 0\.3\)\] {
  box-shadow: 0 8px 24px rgba(167, 139, 250, 0.3);
}
.hover\:shadow-\[0_8px_24px_rgba\(167\2c 139\2c 250\2c 0\.3\)\]:hover {
  box-shadow: 0 8px 24px rgba(167, 139, 250, 0.3);
}

/* ===== BACKDROP BLUR (for mobile header) ===== */
.bg-mc-bg\/80 { background-color: rgb(9 9 11 / 0.8); }

/* ===== ADDITIONAL OPACITY VARIANTS ===== */
.bg-mc-green\/5 { background-color: rgb(34 197 94 / 0.05); }
.bg-mc-green\/20 { background-color: rgb(34 197 94 / 0.2); }
.bg-mc-green\/30 { background-color: rgb(34 197 94 / 0.3); }
.bg-mc-blue\/5 { background-color: rgb(59 130 246 / 0.05); }
.bg-mc-blue\/30 { background-color: rgb(59 130 246 / 0.3); }
.bg-mc-red\/5 { background-color: rgb(239 68 68 / 0.05); }
.bg-mc-amber\/\[0\.12\] { background-color: rgb(245 158 11 / 0.12); }

.border-mc-green\/20 { border-color: rgb(34 197 94 / 0.2); }
.border-mc-green\/30 { border-color: rgb(34 197 94 / 0.3); }
.border-mc-blue\/30 { border-color: rgb(59 130 246 / 0.3); }

.from-mc-amber\/10 { --tw-gradient-from: rgb(245 158 11 / 0.1); }
.from-mc-amber\/\[0\.12\] { --tw-gradient-from: rgb(245 158 11 / 0.12); }
.to-mc-red\/5 { --tw-gradient-to: rgb(239 68 68 / 0.05); }
.to-mc-blue\/5 { --tw-gradient-to: rgb(59 130 246 / 0.05); }

/* ===== WORKSPACE PROSE (markdown rendering) ===== */
.workspace-prose p { margin-bottom: 0.5em; }
.workspace-prose p:last-child { margin-bottom: 0; }
.workspace-prose h1 { font-size: 1.25em; font-weight: 700; margin: 0.75em 0 0.25em; }
.workspace-prose h2 { font-size: 1.125em; font-weight: 700; margin: 0.75em 0 0.25em; }
.workspace-prose h3 { font-size: 1em; font-weight: 700; margin: 0.5em 0 0.25em; }
.workspace-prose h4,
.workspace-prose h5,
.workspace-prose h6 { font-size: 1em; font-weight: 600; margin: 0.5em 0 0.25em; }
.workspace-prose strong, .workspace-prose b { font-weight: 600; color: var(--mc-fg); }
.workspace-prose em, .workspace-prose i { font-style: italic; }
.workspace-prose ul { list-style: disc; padding-left: 1.25em; margin: 0.25em 0; }
.workspace-prose ol { list-style: decimal; padding-left: 1.25em; margin: 0.25em 0; }
.workspace-prose li { margin: 0.15em 0; }
.workspace-prose li > ul,
.workspace-prose li > ol { margin: 0.1em 0; }
.workspace-prose code { font-family: ui-monospace, monospace; font-size: 0.85em; background: var(--mc-muted); color: var(--mc-purple-light); padding: 0.15em 0.35em; border-radius: 4px; }
.workspace-prose pre { background: var(--mc-muted); border: 1px solid var(--mc-border); border-radius: 8px; padding: 0.75em 1em; margin: 0.5em 0; overflow-x: auto; }
.workspace-prose pre code { background: none; padding: 0; color: var(--mc-fg); font-size: 0.8em; }
.workspace-prose blockquote { border-left: 3px solid var(--mc-purple); padding-left: 0.75em; margin: 0.5em 0; color: var(--mc-muted-light); }
.workspace-prose a { color: var(--mc-purple-light); text-decoration: underline; text-underline-offset: 2px; }
.workspace-prose a:hover { color: var(--mc-purple); }
.workspace-prose hr { border: none; border-top: 1px solid var(--mc-border); margin: 0.75em 0; }
.workspace-prose table { width: 100%; border-collapse: collapse; margin: 0.5em 0; font-size: 0.85em; }
.workspace-prose th { text-align: left; font-weight: 600; padding: 0.35em 0.5em; border-bottom: 1px solid var(--mc-border); color: var(--mc-fg); }
.workspace-prose td { padding: 0.35em 0.5em; border-bottom: 1px solid var(--mc-border-subtle); }

/* ===== TYPING INDICATOR ===== */
@keyframes typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-4px); opacity: 1; }
}
.typing-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--mc-purple);
  animation: typing-bounce 1.2s ease-in-out infinite;
}

/* ===== FLOOR TRAY BACKDROP ===== */
.bg-mc-bg-sidebar\/95 { background-color: rgb(12 12 14 / 0.95); }

/* ===== MISC ===== */
.border-mc-red\/40 { border-color: rgb(239 68 68 / 0.4); }
.border-mc-red\/50 { border-color: rgb(239 68 68 / 0.5); }
.hover\:bg-mc-red\/8:hover { background-color: rgb(239 68 68 / 0.08); }
.bg-mc-red\/8 { background-color: rgb(239 68 68 / 0.08); }