@tailwind base;
@tailwind components;
@tailwind utilities;

/* Light Mode 色彩變數系統 */
:root {
  /* 基礎色彩 */
  --bg-primary: #ffffff;
  --bg-secondary: #f8f9fa;
  --bg-tertiary: #f3f4f6;

  /* 文字色彩 */
  --text-primary: #1f2937;
  --text-secondary: #6b7280;
  --text-tertiary: #9ca3af;
  --text-heading: #111827;

  /* 邊框色彩 */
  --border-primary: rgba(0, 0, 0, 0.08);
  --border-secondary: rgba(0, 0, 0, 0.12);
  --border-focus: rgba(59, 130, 246, 0.5);

  /* Glass Morphism - 加強對比 */
  --glass-bg: rgba(255, 255, 255, 0.65);
  --glass-bg-hover: rgba(255, 255, 255, 0.75);
  --glass-border: rgba(255, 255, 255, 0.45);
  --glass-shadow: 0 8px 32px rgba(31, 38, 135, 0.12);
  --glass-blur: 16px;
}

/* 自定義滾動條樣式 - Light Mode */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: #f9fafb;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 5px;
  border: 2px solid #f9fafb;
}

::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}

@layer base {
  html {
    font-family: 'Inter', system-ui, sans-serif;
  }

  body {
    @apply text-gray-800;
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* 彩色網格背景 - 讓玻璃效果更明顯 */
    background:
      linear-gradient(to right, #f0f0f0 1px, transparent 1px),
      linear-gradient(to bottom, #f0f0f0 1px, transparent 1px),
      linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #feca57 75%, #667eea 100%);
    background-size: 50px 50px, 50px 50px, 400% 400%;
    background-position: 0 0, 0 0, 0% 0%;
    animation: gradientMove 20s ease infinite;
    min-height: 100vh;
    position: relative;
  }

  @keyframes gradientMove {
    0% { background-position: 0 0, 0 0, 0% 0%; }
    25% { background-position: 0 0, 0 0, 100% 100%; }
    50% { background-position: 0 0, 0 0, 0% 100%; }
    75% { background-position: 0 0, 0 0, 100% 0%; }
    100% { background-position: 0 0, 0 0, 0% 0%; }
  }

  /* 動態幾何圖形背景 */
  body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
      repeating-linear-gradient(
        45deg,
        transparent,
        transparent 35px,
        rgba(168, 85, 247, 0.05) 35px,
        rgba(168, 85, 247, 0.05) 70px
      ),
      repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 35px,
        rgba(59, 130, 246, 0.05) 35px,
        rgba(59, 130, 246, 0.05) 70px
      );
    pointer-events: none;
    z-index: -1;
  }

  /* 添加浮動的裝飾元素 */
  body::after {
    content: '';
    position: fixed;
    top: 10%;
    left: 10%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(168, 85, 247, 0.3) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
    animation: float 10s ease-in-out infinite;
  }

  code {
    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
  }
}

@layer components {
  /* 加強版 Glass Morphism 效果 */
  .glass {
    background: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.25) 0%,
      rgba(255, 255, 255, 0.15) 100%
    );
    backdrop-filter: blur(10px) saturate(180%) contrast(120%);
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow:
      0 8px 32px 0 rgba(31, 38, 135, 0.25),
      0 2px 8px 0 rgba(0, 0, 0, 0.1),
      inset 0 2px 4px 0 rgba(255, 255, 255, 0.5),
      inset 0 -1px 1px 0 rgba(0, 0, 0, 0.1);
    position: relative;
  }

  .glass-hover:hover {
    background: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.8) 0%,
      rgba(249, 250, 251, 0.7) 100%
    );
    box-shadow:
      0 10px 40px 0 rgba(31, 38, 135, 0.2),
      0 4px 12px 0 rgba(0, 0, 0, 0.1),
      inset 0 2px 4px 0 rgba(255, 255, 255, 1),
      inset 0 -1px 1px 0 rgba(0, 0, 0, 0.05);
    transform: translateY(-2px);
  }

  /* 深色 Glass 效果（用於卡片等） */
  .glass-card {
    background: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.7) 0%,
      rgba(249, 250, 251, 0.6) 50%,
      rgba(243, 244, 246, 0.5) 100%
    );
    backdrop-filter: blur(16px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow:
      0 8px 24px 0 rgba(149, 157, 165, 0.2),
      0 2px 8px 0 rgba(0, 0, 0, 0.08),
      inset 0 2px 3px 0 rgba(255, 255, 255, 0.95),
      inset 0 -1px 1px 0 rgba(0, 0, 0, 0.04);
    position: relative;
    overflow: hidden;
  }

  /* 加強玻璃效果的偽元素 */
  .glass-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
      105deg,
      rgba(255, 255, 255, 0.4) 0%,
      transparent 40%,
      transparent 60%,
      rgba(255, 255, 255, 0.2) 100%
    );
    pointer-events: none;
  }

  /* 按鈕樣式 */
  .btn {
    @apply px-4 py-2 rounded-xl font-medium transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  }

  .btn-primary {
    @apply btn;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.9) 0%, rgba(29, 78, 216, 0.9) 100%);
    backdrop-filter: blur(10px);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow:
      0 4px 6px -1px rgba(37, 99, 235, 0.25),
      inset 0 1px 2px 0 rgba(255, 255, 255, 0.3);
  }

  .btn-primary:hover {
    background: linear-gradient(135deg, rgba(29, 78, 216, 0.95) 0%, rgba(30, 64, 175, 0.95) 100%);
    box-shadow:
      0 6px 8px -1px rgba(37, 99, 235, 0.3),
      inset 0 1px 2px 0 rgba(255, 255, 255, 0.4);
    transform: translateY(-1px);
  }

  .btn-secondary {
    @apply btn text-gray-700;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.8) 0%, rgba(249, 250, 251, 0.8) 100%);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow:
      0 2px 4px -1px rgba(0, 0, 0, 0.1),
      inset 0 1px 2px 0 rgba(255, 255, 255, 0.8);
  }

  .btn-secondary:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(249, 250, 251, 0.9) 100%);
    box-shadow:
      0 4px 6px -1px rgba(0, 0, 0, 0.1),
      inset 0 1px 2px 0 rgba(255, 255, 255, 0.95);
  }

  /* 玻璃按鈕 */
  .btn-glass {
    @apply px-4 py-2 rounded-xl font-medium transition-all duration-200;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: currentColor;
    box-shadow:
      0 4px 6px -1px rgba(0, 0, 0, 0.1),
      inset 0 1px 2px 0 rgba(255, 255, 255, 0.5);
  }

  .btn-glass:hover {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(12px) saturate(200%);
    box-shadow:
      0 8px 12px -2px rgba(0, 0, 0, 0.15),
      inset 0 1px 3px 0 rgba(255, 255, 255, 0.6);
    transform: translateY(-1px);
  }

  .btn-danger {
    @apply btn;
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: #ffffff;
  }

  .btn-danger:hover {
    background: linear-gradient(135deg, #b91c1c 0%, #991b1b 100%);
    box-shadow: 0 4px 6px -1px rgba(220, 38, 38, 0.25);
  }

  /* 卡片樣式 */
  .card {
    @apply rounded-xl transition-all duration-200;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(249, 250, 251, 0.8) 100%);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow:
      0 4px 6px -1px rgba(0, 0, 0, 0.1),
      0 2px 4px -1px rgba(0, 0, 0, 0.06),
      inset 0 1px 2px 0 rgba(255, 255, 255, 0.8);
    position: relative;
    overflow: hidden;
  }

  .card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
      transparent,
      rgba(255, 255, 255, 0.5) 50%,
      transparent
    );
  }

  .card:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(249, 250, 251, 0.85) 100%);
    box-shadow:
      0 10px 15px -3px rgba(0, 0, 0, 0.15),
      0 4px 6px -2px rgba(0, 0, 0, 0.08),
      inset 0 1px 3px 0 rgba(255, 255, 255, 0.9);
    transform: translateY(-2px);
  }

  /* 輸入框樣式 */
  .input {
    @apply w-full px-4 py-2.5 rounded-xl focus:ring-2 focus:ring-blue-500/30 focus:border-transparent outline-none transition-all duration-200;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow:
      0 1px 2px 0 rgba(0, 0, 0, 0.05),
      inset 0 1px 2px 0 rgba(255, 255, 255, 0.5);
  }

  .input:focus {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(59, 130, 246, 0.3);
    box-shadow:
      0 0 0 3px rgba(37, 99, 235, 0.1),
      0 1px 2px 0 rgba(0, 0, 0, 0.05),
      inset 0 1px 3px 0 rgba(255, 255, 255, 0.7);
  }

  /* 玻璃輸入框 */
  .input-glass {
    @apply w-full px-4 py-2.5 rounded-xl outline-none transition-all duration-200;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: currentColor;
    box-shadow:
      inset 0 1px 3px 0 rgba(0, 0, 0, 0.1),
      inset 0 -1px 2px 0 rgba(255, 255, 255, 0.5);
  }

  .input-glass:focus {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(12px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow:
      0 0 0 3px rgba(255, 255, 255, 0.1),
      inset 0 1px 3px 0 rgba(0, 0, 0, 0.05),
      inset 0 -1px 2px 0 rgba(255, 255, 255, 0.7);
  }

  .input-glass::placeholder {
    color: rgba(0, 0, 0, 0.4);
  }

  /* 徽章樣式 */
  .badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium border;
  }

  .badge-success {
    @apply badge bg-green-50 text-green-700 border-green-200;
  }

  .badge-warning {
    @apply badge bg-amber-50 text-amber-700 border-amber-200;
  }

  .badge-error {
    @apply badge bg-red-50 text-red-700 border-red-200;
  }

  .badge-info {
    @apply badge bg-blue-50 text-blue-700 border-blue-200;
  }
}

/* Light Mode 特效 */
@layer utilities {
  /* 柔和陰影系統 */
  .shadow-soft-sm {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  }

  .shadow-soft {
    box-shadow:
      0 4px 6px -1px rgba(0, 0, 0, 0.1),
      0 2px 4px -1px rgba(0, 0, 0, 0.06);
  }

  .shadow-soft-md {
    box-shadow:
      0 10px 15px -3px rgba(0, 0, 0, 0.1),
      0 4px 6px -2px rgba(0, 0, 0, 0.05);
  }

  .shadow-soft-lg {
    box-shadow:
      0 20px 25px -5px rgba(0, 0, 0, 0.1),
      0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }

  /* 彩色陰影 */
  .shadow-blue {
    box-shadow: 0 10px 40px -10px rgba(59, 130, 246, 0.25);
  }

  .shadow-purple {
    box-shadow: 0 10px 40px -10px rgba(147, 51, 234, 0.25);
  }

  .shadow-green {
    box-shadow: 0 10px 40px -10px rgba(34, 197, 94, 0.25);
  }

  /* 超強玻璃效果 - 用於需要特別明顯效果的地方 */
  .glass-ultra {
    /* 使用更低的透明度讓玻璃效果更明顯 */
    background: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.4) 0%,
      rgba(255, 255, 255, 0.3) 50%,
      rgba(255, 255, 255, 0.2) 100%
    );
    backdrop-filter: blur(24px) saturate(200%) brightness(110%);
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow:
      0 12px 48px 0 rgba(0, 0, 0, 0.12),
      0 8px 24px 0 rgba(31, 38, 135, 0.15),
      0 2px 8px 0 rgba(0, 0, 0, 0.04),
      inset 0 3px 5px 0 rgba(255, 255, 255, 0.95),
      inset 0 -1px 2px 0 rgba(0, 0, 0, 0.08);
    position: relative;
  }

  .glass-ultra::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.5) 0%,
      transparent 30%,
      transparent 70%,
      rgba(255, 255, 255, 0.3) 100%
    );
    border-radius: inherit;
    pointer-events: none;
  }

  /* 深色背景上的玻璃效果 */
  .glass-on-dark {
    background: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.15) 0%,
      rgba(255, 255, 255, 0.08) 100%
    );
    backdrop-filter: blur(20px) saturate(150%) brightness(120%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow:
      0 8px 32px 0 rgba(0, 0, 0, 0.3),
      inset 0 2px 4px 0 rgba(255, 255, 255, 0.2);
  }

  /* 備用玻璃效果 - 不依賴 backdrop-filter 的純 CSS 實現 */
  .glass-fallback {
    background: linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.92) 0%,
      rgba(248, 250, 252, 0.85) 25%,
      rgba(241, 243, 245, 0.88) 50%,
      rgba(248, 250, 252, 0.85) 75%,
      rgba(255, 255, 255, 0.92) 100%
    );
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow:
      0 0 0 0.5px rgba(255, 255, 255, 0.8) inset,
      0 0 0 1px rgba(0, 0, 0, 0.05) inset,
      0 20px 40px -10px rgba(59, 130, 246, 0.15),
      0 15px 35px -5px rgba(0, 0, 0, 0.08),
      0 10px 20px -5px rgba(147, 51, 234, 0.08),
      0 1px 4px rgba(0, 0, 0, 0.02),
      inset 0 4px 8px 0 rgba(255, 255, 255, 0.95),
      inset 0 -2px 4px 0 rgba(0, 0, 0, 0.06);
    position: relative;
    overflow: hidden;
  }

  /* 添加多層光澤效果 */
  .glass-fallback::before,
  .glass-fallback::after {
    content: '';
    position: absolute;
    pointer-events: none;
  }

  .glass-fallback::before {
    inset: 0;
    background: radial-gradient(
      600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
      rgba(255, 255, 255, 0.4),
      transparent 40%
    );
    border-radius: inherit;
    opacity: 0.6;
  }

  .glass-fallback::after {
    inset: -1px;
    background: linear-gradient(
      105deg,
      rgba(255, 255, 255, 0.7) 0%,
      rgba(255, 255, 255, 0) 20%,
      rgba(255, 255, 255, 0) 80%,
      rgba(255, 255, 255, 0.5) 100%
    );
    border-radius: inherit;
  }

  /* 極致玻璃效果 - 結合多種技術 */
  .glass-extreme {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px) saturate(200%) contrast(130%) brightness(110%);
    background-image:
      linear-gradient(135deg,
        rgba(255, 255, 255, 0.3) 0%,
        transparent 50%,
        rgba(255, 255, 255, 0.1) 100%);
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow:
      /* 外部陰影 */
      0 25px 50px -12px rgba(0, 0, 0, 0.25),
      0 18px 36px -18px rgba(0, 0, 0, 0.3),
      /* 彩色陰影 */
      0 12px 28px -8px rgba(120, 119, 198, 0.3),
      0 6px 16px -4px rgba(255, 119, 198, 0.2),
      /* 內部光澤 */
      inset 0 0 0 1px rgba(255, 255, 255, 0.4),
      inset 0 2px 4px 0 rgba(255, 255, 255, 0.6),
      inset 0 -1px 2px 0 rgba(0, 0, 0, 0.1);
    position: relative;
  }

  /* 主要內容區域的背景 - 添加微妙的圖案 */
  .main-content-bg {
    position: relative;
    background:
      radial-gradient(circle at 10% 20%, rgba(120, 119, 198, 0.1) 0%, transparent 50%),
      radial-gradient(circle at 80% 80%, rgba(255, 119, 198, 0.1) 0%, transparent 50%),
      radial-gradient(circle at 40% 40%, rgba(120, 219, 255, 0.1) 0%, transparent 50%),
      linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.1) 100%);
  }

  /* 背景裝飾 */
  .bg-gradient-soft {
    background: linear-gradient(135deg, #fafafa 0%, #ffffff 100%);
  }

  .bg-pattern {
    background-image:
      radial-gradient(circle at 20% 80%, rgba(59, 130, 246, 0.05) 0%, transparent 50%),
      radial-gradient(circle at 80% 20%, rgba(147, 51, 234, 0.05) 0%, transparent 50%),
      radial-gradient(circle at 40% 40%, rgba(34, 197, 94, 0.03) 0%, transparent 50%);
  }
}

/* 動畫 */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideIn {
  from { transform: translateY(-10px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@keyframes slideInUp {
  from {
    transform: translateY(10px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@keyframes pulse-soft {
  0%, 100% { opacity: 0.8; }
  50% { opacity: 0.4; }
}

.animate-fade-in {
  animation: fadeIn 0.3s ease-in-out;
}

.animate-slide-in {
  animation: slideIn 0.3s ease-out;
}

.animate-slide-in-up {
  animation: slideInUp 0.3s ease-out;
}

.animate-float {
  animation: float 3s ease-in-out infinite;
}

.animate-pulse-soft {
  animation: pulse-soft 2s ease-in-out infinite;
}

/* 自定義 prose 樣式 */
.prose pre {
  background-color: inherit;
  padding: 0;
  margin: 0;
  border: none;
  border-radius: 0;
}

.prose code {
  background-color: inherit;
  padding: 0;
  border-radius: 0;
  font-weight: inherit;
  color: inherit;
}

/* Markdown 渲染樣式 */
.markdown-body {
  @apply text-gray-800 dark:text-gray-200 leading-relaxed;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  max-width: 100%;
}

.markdown-body > *:first-child {
  margin-top: 0 !important;
}

.markdown-body > *:last-child {
  margin-bottom: 0 !important;
}

/* 程式碼區塊樣式 */
.markdown-body pre {
  @apply bg-gray-900 dark:bg-gray-950 text-gray-100 p-4 rounded-xl overflow-x-auto my-4 shadow-lg;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  max-width: 100%;
  overflow-wrap: normal; /* 程式碼保持原格式 */
  white-space: pre;
}

.markdown-body pre code {
  @apply bg-transparent p-0 text-sm;
  line-height: 1.6;
  word-break: normal;
  white-space: pre;
}

/* 行內程式碼樣式 */
.markdown-body :not(pre) > code {
  @apply bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300 px-1.5 py-0.5 rounded-md text-sm font-mono;
  font-size: 0.875em;
  word-break: break-all;
  overflow-wrap: anywhere;
}

/* 調整程式碼區塊中的高亮樣式 */
.hljs {
  background: transparent !important;
  padding: 0 !important;
}

/* 連結樣式 */
.markdown-body a {
  @apply text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 underline transition-colors;
}

/* 引用樣式 */
.markdown-body blockquote {
  @apply border-l-4 border-gray-300 dark:border-gray-600 pl-4 italic text-gray-700 dark:text-gray-300;
}

/* 表格樣式 */
.markdown-body table {
  @apply w-full border-collapse my-4;
}

.markdown-body th {
  @apply bg-gray-100 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 px-4 py-2 text-left font-semibold;
}

.markdown-body td {
  @apply border border-gray-300 dark:border-gray-600 px-4 py-2;
}

/* 列表樣式 */
.markdown-body ul {
  @apply list-disc list-inside space-y-1 my-2;
}

.markdown-body ol {
  @apply list-decimal list-inside space-y-1 my-2;
}

/* 標題樣式 */
.markdown-body h1 {
  @apply text-2xl font-bold mt-6 mb-4 text-gray-900 dark:text-gray-100;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

.markdown-body h2 {
  @apply text-xl font-bold mt-5 mb-3 text-gray-900 dark:text-gray-100;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

.markdown-body h3 {
  @apply text-lg font-semibold mt-4 mb-2 text-gray-900 dark:text-gray-100;
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

/* 段落樣式 */
.markdown-body p {
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

/* 使用者訊息內的 Markdown 樣式調整 */
.bg-blue-600 .markdown-body {
  @apply text-white;
}

.bg-blue-600 .markdown-body :not(pre) > code {
  @apply bg-blue-500/30 text-blue-100 border border-blue-400/30;
}

.bg-blue-600 .markdown-body a {
  @apply text-blue-200 hover:text-blue-100;
}