/* カスタムスタイル */
:root {
  --background: #1a1a1f;
  --background-secondary: #242429;
  --background-tertiary: #2a2a2f;
  --foreground: #f5f5f5;
  --foreground-secondary: #d1d1d6;
  --foreground-tertiary: #a1a1aa;
  --primary: #38bdf8;
  --primary-dark: #0ea5e9;
  --primary-darker: #0284c7;
  --border-light: rgba(255, 255, 255, 0.08);
  --border-medium: rgba(255, 255, 255, 0.12);
  --border-primary: rgba(56, 189, 248, 0.3);
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
  margin: 0;
  padding: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  text-decoration: none;
}

.chat-markdown p + p {
  margin-top: 0.4rem;
}

.chat-markdown ul,
.chat-markdown ol {
  margin: 0.25rem 0 0.25rem 1.1rem;
  padding-left: 0;
}

.chat-markdown li + li {
  margin-top: 0.1rem;
}

.chat-markdown h1,
.chat-markdown h2,
.chat-markdown h3 {
  margin-top: 0.4rem;
  margin-bottom: 0.2rem;
  font-weight: 600;
}

.chat-markdown h1 {
  font-size: 0.95rem;
}

.chat-markdown h2 {
  font-size: 0.9rem;
}

.chat-markdown h3 {
  font-size: 0.85rem;
}

.chat-markdown code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  background: rgba(255, 255, 255, 0.1);
  padding: 0.1rem 0.3rem;
  border-radius: 0.25rem;
  font-size: 0.875em;
}

.chat-markdown pre {
  max-width: 100%;
  background: rgba(255, 255, 255, 0.05);
  padding: 0.75rem;
  border-radius: 0.5rem;
  overflow-x: auto;
}

.chat-markdown pre code {
  background: none;
  padding: 0;
}

.chat-markdown table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.4rem;
  font-size: 0.75rem;
}

.chat-markdown th,
.chat-markdown td {
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 0.2rem 0.35rem;
}

.chat-markdown th {
  background-color: rgba(42, 42, 47, 0.8);
  font-weight: 600;
}

.chat-markdown img {
  max-width: 100%;
  height: auto;
  border-radius: 0.25rem;
  margin-top: 0.25rem;
}

@keyframes fade-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in {
  animation: fade-in 0.2s ease-out forwards;
}

@media (prefers-reduced-motion: reduce) {
  .animate-fade-in {
    animation: none;
  }
}