@import "tailwindcss";

@theme {
  /* ── TITAN Zinc-Indigo Palette ────────────────────────── */
  --color-bg: #09090b;
  --color-bg-secondary: #18181b;
  --color-bg-tertiary: #27272a;
  --color-bg-deep: #000000;
  --color-border: #3f3f46;
  --color-border-light: #52525b;
  --color-text: #fafafa;
  --color-text-secondary: #a1a1aa;
  --color-text-muted: #71717a;

  /* ── Accent (TITAN indigo → purple) ───────────────────── */
  --color-accent: #6366f1;
  --color-accent-hover: #818cf8;
  --color-accent-dim: #4f46e5;
  --color-accent-light: #a5b4fc;
  --color-accent2: #a855f7;

  /* ── Semantic ─────────────────────────────────────────── */
  --color-success: #22c55e;
  --color-warning: #f59e0b;
  --color-error: #ef4444;
  --color-info: #3b82f6;

  /* ── Extended palette ─────────────────────────────────── */
  --color-purple: #8b5cf6;
  --color-purple-light: #a78bfa;
  --color-cyan: #22d3ee;
  --color-emerald: #34d399;
  --color-nvidia: #76b900;

  /* ── Chat ─────────────────────────────────────────────── */
  --color-user-bubble: #6366f1;
  --color-assistant-bubble: #27272a;

  /* ── Mission Control Shell ───────────────────────────── */
  --color-rail-bg: #0a0a0c;
  --color-rail-active: #6366f1;
  --color-rail-hover: #18181b;
  --color-status-bar-bg: #0a0a0c;

  /* ── Activity panel states ───────────────────────────── */
  --color-trace-active: #22d3ee;
  --color-trace-complete: #22c55e;
  --color-soul-glow: #a855f7;
  --color-alert-urgent: #ef4444;
  --color-alert-warning: #f59e0b;

  /* ── Resize handle ───────────────────────────────────── */
  --color-resize-handle: #27272a;
  --color-resize-active: #6366f1;

  /* ── Desk Aesthetic (v6.1.0-alpha.49) ──────────────────── */
  --color-desk-widget-bg: #fdf6e3;
  --color-desk-widget-bg-dark: #3a2518;
  --color-desk-border: rgba(90, 65, 40, 0.35);
  --color-desk-border-light: rgba(120, 95, 65, 0.45);
  --color-desk-text: #2a1f15;
  --color-desk-text-secondary: #6b5a45;
  --color-desk-text-muted: #9a8b78;
  --color-desk-accent: #b08a3a;
  --color-desk-accent-hover: #c99b3e;
  --color-desk-header-bg: rgba(253, 246, 227, 0.92);
  --color-desk-paper: #fdf6e3;
  --color-desk-leather: #3a2518;
  --color-desk-brass: #b08a3a;
  --color-desk-cream: #f3e9d0;
}

:root {
  /* ── Gradients ──────────────────────────────────────── */
  --gradient-accent: linear-gradient(135deg, var(--color-accent), var(--color-accent2));
  --gradient-accent-subtle: linear-gradient(135deg, var(--color-accent) 0%, var(--color-purple) 100%);

  /* ── Shadows & Glow ─────────────────────────────────── */
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-card-hover: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-glow-accent: 0 0 20px rgba(99, 102, 241, 0.15);
  --shadow-glow-accent-strong: 0 0 30px rgba(99, 102, 241, 0.25);
  --shadow-glow-success: 0 0 20px rgba(34, 197, 94, 0.15);
  --shadow-glow-error: 0 0 20px rgba(239, 68, 68, 0.15);
  --shadow-rail: 2px 0 8px rgba(0, 0, 0, 0.4);
  --shadow-status-bar: 0 -1px 4px rgba(0, 0, 0, 0.3);
  --shadow-glow-soul: 0 0 30px rgba(168, 85, 247, 0.2);
  --shadow-glow-trace: 0 0 20px rgba(34, 211, 238, 0.15);

  /* ── Radius ─────────────────────────────────────────── */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.25rem;

  /* ── Transitions ────────────────────────────────────── */
  --transition-fast: 150ms ease;
  --transition-normal: 200ms ease;
  --transition-slow: 300ms ease;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: var(--color-bg);
  color: var(--color-text);
}

/* ── Desktop Shell Polish ───────────────────────────────── */
.titan-desktop-workspace {
  background:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--theme-metal, var(--color-accent)) 20%, transparent), transparent 34rem),
    linear-gradient(135deg, var(--theme-bg-base, var(--color-bg)) 0%, var(--theme-bg-grain, var(--color-bg-secondary)) 100%);
  background-size: 28px 28px, 28px 28px, auto, auto;
}

.titan-desktop-pane {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 18rem),
    color-mix(in srgb, var(--theme-paper, var(--color-bg-secondary)) 12%, transparent);
}

.titan-window-titlebar {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding: 1rem;
  border: 1px solid color-mix(in srgb, var(--theme-menu-border, var(--color-border)) 72%, transparent);
  border-radius: 8px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--theme-menu-bg, var(--color-bg-secondary)) 92%, white 3%), var(--theme-menu-bg, var(--color-bg-secondary)));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 14px 32px color-mix(in srgb, var(--theme-shadow, rgba(0, 0, 0, 0.35)) 70%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.titan-empty-state {
  min-height: 16rem;
  border: 1px dashed color-mix(in srgb, var(--theme-menu-border, var(--color-border)) 68%, transparent);
  border-radius: 8px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--theme-menu-bg, var(--color-bg-secondary)) 72%, transparent), transparent),
    color-mix(in srgb, var(--theme-paper, var(--color-bg-secondary)) 9%, transparent);
}

.titan-empty-state > div:first-child {
  border-color: color-mix(in srgb, var(--theme-menu-border, var(--color-border)) 72%, transparent);
  background: color-mix(in srgb, var(--theme-menu-bg, var(--color-bg-secondary)) 84%, transparent);
}

/* ── Living Canvas Desktop Controls ─────────────────────── */
.titan-canvas-titlebar {
  min-height: 4.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.625rem 0.875rem;
  border-bottom: 1px solid var(--color-desk-border);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--color-desk-header-bg) 92%, white 4%), var(--color-desk-header-bg)),
    color-mix(in srgb, var(--theme-paper, #fdf6e3) 88%, transparent);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.38) inset,
    0 10px 22px color-mix(in srgb, var(--theme-shadow, rgba(0, 0, 0, 0.22)) 70%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.titan-canvas-space-icon,
.titan-canvas-icon-button {
  width: 2rem;
  height: 2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  flex: 0 0 auto;
}

.titan-canvas-space-icon {
  border: 1px solid color-mix(in srgb, var(--theme-metal, var(--color-desk-accent)) 42%, transparent);
  background: color-mix(in srgb, var(--theme-paper, #fdf6e3) 72%, var(--theme-metal, #b08a3a) 10%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38);
}

.titan-canvas-title {
  max-width: 18rem;
  color: var(--theme-ink, var(--color-desk-text));
  font-family: var(--theme-font-display, ui-serif, Georgia, serif);
  font-size: 0.875rem;
  font-weight: 700;
  line-height: 1.15;
}

.titan-canvas-subtitle {
  color: var(--theme-ink-soft, var(--color-desk-text-muted));
  font-size: 0.6875rem;
  line-height: 1.1;
}

.titan-canvas-instructions {
  max-width: min(24rem, 34vw);
  min-height: 2rem;
  display: inline-flex;
  align-items: center;
  padding: 0 0.625rem;
  border: 1px solid color-mix(in srgb, var(--color-desk-border) 70%, transparent);
  border-radius: 8px;
  color: var(--theme-ink-soft, var(--color-desk-text-secondary));
  background: color-mix(in srgb, var(--theme-paper, #fdf6e3) 66%, transparent);
  font-size: 0.6875rem;
}

.titan-canvas-instructions:hover {
  color: var(--theme-ink, var(--color-desk-text));
  border-color: color-mix(in srgb, var(--theme-metal, var(--color-desk-accent)) 52%, transparent);
}

.titan-canvas-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.375rem;
  min-width: 0;
  flex-wrap: wrap;
}

.titan-canvas-icon-button {
  border: 1px solid color-mix(in srgb, var(--color-desk-border) 78%, transparent);
  color: var(--theme-ink-soft, var(--color-desk-text-secondary));
  background:
    linear-gradient(180deg, rgba(255,255,255,0.2), transparent),
    color-mix(in srgb, var(--theme-paper, #fdf6e3) 74%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32);
  transition: border-color 120ms ease, color 120ms ease, background-color 120ms ease, transform 120ms ease;
}

.titan-canvas-icon-button:hover:not(:disabled) {
  transform: translateY(-1px);
  color: var(--theme-ink, var(--color-desk-text));
  border-color: color-mix(in srgb, var(--theme-metal, var(--color-desk-accent)) 58%, transparent);
  background: color-mix(in srgb, var(--theme-paper, #fdf6e3) 88%, var(--theme-metal, #b08a3a) 8%);
}

.titan-canvas-icon-button--primary {
  color: var(--theme-metal-dark, var(--color-desk-accent));
  border-color: color-mix(in srgb, var(--theme-metal, var(--color-desk-accent)) 55%, transparent);
}

.titan-canvas-icon-button--danger {
  color: var(--color-error);
  border-color: color-mix(in srgb, var(--color-error) 25%, transparent);
  background: color-mix(in srgb, var(--color-error) 6%, var(--theme-paper, #fdf6e3));
}

.titan-canvas-version-chip {
  min-height: 2rem;
  padding: 0 0.625rem;
  border: 1px solid var(--color-desk-border);
  border-radius: 8px;
  color: var(--theme-ink-soft, var(--color-desk-text-muted));
  font-size: 0.6875rem;
  font-weight: 650;
}

.titan-canvas-version-chip--update {
  color: var(--color-warning);
  border-color: color-mix(in srgb, var(--color-warning) 38%, transparent);
  background: color-mix(in srgb, var(--color-warning) 10%, transparent);
}

.titan-canvas-empty-panel {
  border: 1px solid var(--color-desk-border);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), transparent 42%),
    var(--color-desk-widget-bg);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.42),
    0 12px 30px color-mix(in srgb, var(--theme-shadow, rgba(0,0,0,0.2)) 64%, transparent);
}

.titan-widget-gallery-window {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--theme-menu-border, var(--color-desk-border)) 78%, transparent);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.08), transparent 22%),
    var(--theme-paper, var(--color-desk-widget-bg));
  color: var(--theme-ink, var(--color-desk-text));
  box-shadow:
    0 1px 0 rgba(255,255,255,0.32) inset,
    0 22px 64px rgba(0,0,0,0.42);
}

.titan-widget-gallery-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--theme-menu-border, var(--color-desk-border));
  background: color-mix(in srgb, var(--theme-paper, #fdf6e3) 78%, var(--theme-metal, #b08a3a) 7%);
}

.titan-window-dot {
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 999px;
  background: var(--theme-metal, var(--color-desk-accent));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3);
}

.titan-window-dot--dim {
  opacity: 0.42;
}

.titan-widget-gallery-category-row {
  display: flex;
  gap: 0.375rem;
  overflow-x: auto;
  padding: 0.625rem 1rem;
  border-bottom: 1px solid var(--theme-menu-border, var(--color-desk-border));
  font-size: 0.6875rem;
}

.titan-widget-gallery-category {
  white-space: nowrap;
  border: 1px solid color-mix(in srgb, var(--theme-menu-border, var(--color-desk-border)) 72%, transparent);
  border-radius: 8px;
  padding: 0.375rem 0.625rem;
  color: var(--theme-ink-soft, var(--color-desk-text-secondary));
  background: color-mix(in srgb, var(--theme-paper, #fdf6e3) 68%, transparent);
}

.titan-widget-gallery-category:hover,
.titan-widget-gallery-category--active {
  color: var(--theme-ink, var(--color-desk-text));
  border-color: color-mix(in srgb, var(--theme-metal, var(--color-desk-accent)) 60%, transparent);
  background: color-mix(in srgb, var(--theme-metal, var(--color-desk-accent)) 12%, var(--theme-paper, #fdf6e3));
}

.titan-widget-gallery-search {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid color-mix(in srgb, var(--theme-menu-border, var(--color-desk-border)) 72%, transparent);
  border-radius: 8px;
  padding: 0.625rem 0.75rem;
  color: var(--theme-ink-soft, var(--color-desk-text-secondary));
  background: color-mix(in srgb, var(--theme-paper, #fdf6e3) 70%, transparent);
}

.titan-widget-gallery-search input {
  color: var(--theme-ink, var(--color-desk-text));
}

.titan-widget-gallery-search input::placeholder {
  color: var(--theme-ink-soft, var(--color-desk-text-muted));
}

.titan-widget-gallery-card {
  min-height: 7.25rem;
  width: 100%;
  padding: 0.875rem;
  text-align: left;
  border: 1px solid color-mix(in srgb, var(--theme-menu-border, var(--color-desk-border)) 72%, transparent);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.16), transparent 48%),
    color-mix(in srgb, var(--theme-paper, #fdf6e3) 78%, transparent);
  transition: transform 120ms ease, border-color 120ms ease, background 120ms ease;
}

.titan-widget-gallery-card:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--theme-metal, var(--color-desk-accent)) 58%, transparent);
  background: color-mix(in srgb, var(--theme-paper, #fdf6e3) 88%, var(--theme-metal, #b08a3a) 6%);
}

.titan-widget-gallery-card svg {
  color: var(--theme-ink-soft, var(--color-desk-text-muted));
}

.titan-widget-gallery-card:hover svg {
  color: var(--theme-metal-dark, var(--color-desk-accent));
}

.titan-widget-gallery-tag {
  border-radius: 6px;
  padding: 0.125rem 0.375rem;
  color: var(--theme-ink-soft, var(--color-desk-text-muted));
  background: color-mix(in srgb, var(--theme-menu-border, var(--color-desk-border)) 18%, transparent);
  font-size: 0.5625rem;
}

.titan-widget-gallery-note {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 0.875rem;
  border: 1px dashed color-mix(in srgb, var(--theme-menu-border, var(--color-desk-border)) 75%, transparent);
  border-radius: 8px;
  color: var(--theme-ink-soft, var(--color-desk-text-secondary));
  background: color-mix(in srgb, var(--theme-paper, #fdf6e3) 54%, transparent);
}

.titan-widget-gallery-note .font-mono {
  color: var(--theme-ink, var(--color-desk-text));
}

@media (max-width: 920px) {
  .titan-canvas-titlebar {
    align-items: flex-start;
    flex-direction: column;
  }

  .titan-canvas-toolbar {
    justify-content: flex-start;
  }

  .titan-canvas-instructions {
    max-width: min(28rem, 62vw);
  }
}

@media (min-width: 640px) {
  .titan-window-titlebar {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }
}

/* ── Scrollbar ──────────────────────────────────────────── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-border-light);
}

/* ── Markdown code blocks ───────────────────────────────── */
.prose pre {
  background-color: var(--color-bg) !important;
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  padding: 1rem;
  overflow-x: auto;
}

.prose code {
  font-size: 0.875rem;
  font-family: 'SF Mono', 'Fira Code', 'JetBrains Mono', monospace;
}

.prose p code {
  background-color: var(--color-bg-tertiary);
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  font-size: 0.8125rem;
}

/* ── Skeleton shimmer ───────────────────────────────────── */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.skeleton-shimmer {
  background: linear-gradient(
    90deg,
    var(--color-bg-secondary) 25%,
    var(--color-bg-tertiary) 50%,
    var(--color-bg-secondary) 75%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite ease-in-out;
}

/* ── Glow utilities ─────────────────────────────────────── */
.glow-accent {
  box-shadow: var(--shadow-glow-accent);
}
.glow-accent-hover:hover {
  box-shadow: var(--shadow-glow-accent-strong);
}
.glow-success {
  box-shadow: var(--shadow-glow-success);
}

/* ── Gradient text ──────────────────────────────────────── */
.gradient-text-accent {
  background: var(--gradient-accent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── v6.1.0-alpha.8 Mission Canvas keyframes ─────────────── */
@keyframes drift {
  0%   { transform: translate(0, 0); opacity: 0; }
  20%  { opacity: 0.5; }
  100% { transform: translate(40px, -120px); opacity: 0; }
}
@keyframes tetherflow {
  to { stroke-dashoffset: -120; }
}
@keyframes podpulse {
  0%, 100% { opacity: 0.35; transform: scale(1); }
  50%      { opacity: 0.7;  transform: scale(1.035); }
}
@keyframes podalarm {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 0.9;  }
}
@keyframes floatup {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
@keyframes flicker {
  0%   { transform: scaleY(1);    opacity: 0.85; }
  100% { transform: scaleY(1.18); opacity: 1; }
}
