@import "tailwindcss";

@theme {
  --font-sans: "Exo 2", "Plus Jakarta Sans", "PingFang SC", "Microsoft YaHei UI", "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace;
  --font-heading: "Orbitron", "Exo 2", sans-serif;
}

@layer base {
  :root {
    --conversation-content-max-width: 900px;
    --ui-color-primary: #7C3AED;
    --ui-color-primary-strong: #6D28D9;
    --ui-color-primary-soft: #A78BFA;
    --ui-color-accent: #06B6D4;
    --ui-color-canvas: #0F0F23;
    --ui-color-canvas-strong: #1a0b2e;
    --ui-color-surface: rgba(255, 255, 255, 0.08);
    --ui-color-surface-muted: rgba(255, 255, 255, 0.05);
    --ui-color-border: rgba(124, 58, 237, 0.2);
    --ui-color-border-strong: rgba(124, 58, 237, 0.4);
    --ui-color-text: #E2E8F0;
    --ui-color-text-muted: #94A3B8;
    --ui-shadow-soft: 0 14px 30px rgba(0, 0, 0, 0.3);
    --ui-shadow-panel: 0 22px 48px rgba(0, 0, 0, 0.4);
  }

  html,
  body,
  #root {
    height: 100%;
  }

  body {
    margin: 0;
    font-family: var(--font-sans);
    background: linear-gradient(135deg, #0F0F23 0%, #1a0b2e 100%);
    color: var(--ui-color-text);
  }
}

@layer utilities {
  @keyframes user-bubble-in {
    0% {
      opacity: 0;
      transform: translateY(16px);
    }

    100% {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .animate-user-bubble-in {
    animation: user-bubble-in 220ms ease-out both;
  }

  .chat-scroll-smooth {
    scroll-behavior: smooth;
  }

  .app-drag-region {
    -webkit-app-region: drag;
  }

  .app-no-drag {
    -webkit-app-region: no-drag;
  }
}

@layer components {
  .nav-item-icon svg,
  .expert-chip-icon svg,
  .message-action-icon svg,
  .composer-submit svg,
  .attachment-trigger svg,
  .markdown-code-copy svg {
    width: 18px;
    height: 18px;
  }

  .message-list {
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.5) transparent;
  }

  .message-list::-webkit-scrollbar,
  .markdown-code-pre::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  .message-list::-webkit-scrollbar-thumb,
  .markdown-code-pre::-webkit-scrollbar-thumb {
    @apply rounded-full bg-slate-300/80;
  }

  .message-card.assistant .markdown-body > :first-child {
    @apply mt-0;
  }

  .message-card.assistant .markdown-body > :last-child {
    @apply mb-0;
  }

  .message-card.assistant .message-card-actions {
    @apply pointer-events-none;
  }

  .message-card.assistant:hover .message-card-actions {
    @apply pointer-events-auto;
  }

  .markdown-inline-code,
  .markdown-code-pre,
  .markdown-code-pre code {
    font-family: var(--font-mono);
  }

  .markdown-code-block {
    @apply rounded-[18px] border-[#111827] shadow-[0_20px_45px_rgba(15,23,42,0.22)];
  }

  .markdown-code-toolbar {
    @apply min-h-11 px-4 text-[11px] tracking-[0.18em];
  }

  .markdown-code-copy.copied {
    @apply bg-emerald-500/20 text-emerald-200;
  }
}
