/* ============================================================
   深夜网吧风格 · Night Cybercafe Theme
   输出框 = 林栀（冷蓝等宽）  输入框 = 你（暖黄现实感）
   SMIL驱动加载动画，CSS动画被禁用时仍可运行
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');

.bg-gray-100\/90.relative.inline-block {
  position: relative !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  isolation: isolate !important;
  transition: box-shadow 0.4s ease !important;
}

[class*="bg-[#F1CBCB]"],
[class*="bg-[#c9e1e9]"] {
  display: none !important;
}

.chat-answer-container .bg-gray-100\/90.relative.inline-block {
  background: linear-gradient(
    145deg,
    #0d0f1a 0%,
    #101628 40%,
    #0a1020 70%,
    #0d0f1a 100%
  ) !important;
  border: 1px solid rgba(100, 160, 255, 0.25) !important;
  box-shadow:
    0 0 0 1px rgba(80, 140, 255, 0.12),
    0 0 18px 4px rgba(70, 120, 255, 0.13),
    0 0 40px 8px rgba(100, 80, 200, 0.08),
    inset 0 0 30px 6px rgba(60, 100, 200, 0.06) !important;
}

.chat-answer-container .bg-gray-100\/90.relative.inline-block::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 3px,
    rgba(60, 100, 200, 0.03) 3px,
    rgba(60, 100, 200, 0.03) 4px
  ) !important;
  border-radius: inherit !important;
  opacity: 0.7 !important;
}

.chat-answer-container .bg-gray-100\/90.relative.inline-block::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 5% !important;
  width: 90% !important;
  height: 1px !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background: linear-gradient(
    to right,
    transparent,
    rgba(120, 180, 255, 0.5) 30%,
    rgba(160, 140, 255, 0.6) 50%,
    rgba(120, 180, 255, 0.5) 70%,
    transparent
  ) !important;
  box-shadow: 0 0 8px 2px rgba(120, 160, 255, 0.2) !important;
  border-radius: 50% !important;
}

.chat-answer-container .bg-gray-100\/90 .markdown-body {
  font-family: 'Share Tech Mono', 'Courier New', 'Consolas', monospace !important;
  color: #c8deff !important;
  font-size: 14px !important;
  line-height: 1.75 !important;
  letter-spacing: 0.03em !important;
  background: transparent !important;
  position: relative !important;
  z-index: 1 !important;
}

.chat-answer-container .bg-gray-100\/90 .markdown-body code,
.chat-answer-container .bg-gray-100\/90 .markdown-body pre {
  background: rgba(20, 40, 80, 0.6) !important;
  color: #a0cfff !important;
  border: 1px solid rgba(80, 140, 255, 0.2) !important;
  border-radius: 4px !important;
}

.bg-gray-100\/90.relative.inline-block:not(.chat-answer-container .bg-gray-100\/90) {
  background: linear-gradient(
    145deg,
    #1a1208 0%,
    #1e1610 40%,
    #160f06 70%,
    #1a1208 100%
  ) !important;
  border: 1px solid rgba(220, 170, 60, 0.3) !important;
  box-shadow:
    0 0 0 1px rgba(200, 150, 40, 0.15),
    0 0 16px 4px rgba(200, 140, 30, 0.12),
    0 0 38px 8px rgba(160, 100, 20, 0.07),
    inset 0 0 20px 4px rgba(180, 120, 20, 0.06) !important;
}

.bg-gray-100\/90.relative.inline-block:not(.chat-answer-container .bg-gray-100\/90)::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 5% !important;
  width: 90% !important;
  height: 1px !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background: linear-gradient(
    to right,
    transparent,
    rgba(220, 170, 60, 0.55) 30%,
    rgba(255, 200, 80, 0.65) 50%,
    rgba(220, 170, 60, 0.55) 70%,
    transparent
  ) !important;
  box-shadow: 0 0 8px 2px rgba(200, 150, 40, 0.18) !important;
  border-radius: 50% !important;
}

.bg-gray-100\/90.relative.inline-block:not(.chat-answer-container .bg-gray-100\/90)::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none !important;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px,
    transparent 3px,
    rgba(180, 120, 20, 0.03) 3px,
    rgba(180, 120, 20, 0.03) 4px
  ) !important;
  border-radius: inherit !important;
}

.bg-gray-100\/90.relative.inline-block:not(.chat-answer-container .bg-gray-100\/90) .markdown-body {
  font-family: -apple-system, 'Segoe UI', 'PingFang SC', sans-serif !important;
  color: #f0d080 !important;
  font-size: 14px !important;
  line-height: 1.75 !important;
  background: transparent !important;
  position: relative !important;
  z-index: 1 !important;
}

.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary {
  color: rgba(160, 180, 220, 0.65) !important;
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.05em !important;
  transition: color 0.2s ease !important;
}

.MuiButtonBase-root.MuiButton-root.MuiButton-text.MuiButton-textPrimary:hover {
  color: rgba(180, 210, 255, 0.9) !important;
}

.MuiTypography-root.MuiTypography-body2.css-6c0gf2 {
  color: rgba(120, 150, 200, 0.55) !important;
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.08em !important;
}

.text-orange-500 {
  color: rgba(180, 130, 60, 0.7) !important;
  font-family: 'Share Tech Mono', monospace !important;
  font-size: 11px !important;
}

.style-module__AtdJSq__dot-flashing.style-module__AtdJSq__text {
  display: none !important;
}

.flex.items-center.justify-center.w-6.h-5 {
  position: relative !important;
  width: 64px !important;
  height: 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
}

.flex.items-center.justify-center.w-6.h-5::before {
  content: '' !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 56px !important;
  height: 22px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='22' viewBox='0 0 56 22'%3E%3Crect x='2' y='4' width='10' height='14' rx='1' fill='%2360a0ff'%3E%3Canimate attributeName='opacity' values='0;1;1;0;0' dur='1.2s' repeatCount='indefinite' begin='0s' calcMode='linear'/%3E%3C/rect%3E%3Crect x='2' y='4' width='10' height='2' rx='0' fill='%23a8d0ff' opacity='0.7'%3E%3Canimate attributeName='y' values='4;16;4' dur='1.2s' repeatCount='indefinite' begin='0s' calcMode='linear'/%3E%3Canimate attributeName='opacity' values='0;0.8;0' dur='1.2s' repeatCount='indefinite' begin='0s'/%3E%3C/rect%3E%3Crect x='23' y='4' width='10' height='14' rx='1' fill='%2360a0ff'%3E%3Canimate attributeName='opacity' values='0;0;1;1;0' dur='1.2s' repeatCount='indefinite' begin='0.35s' calcMode='linear'/%3E%3C/rect%3E%3Crect x='23' y='4' width='10' height='2' rx='0' fill='%23a8d0ff' opacity='0.7'%3E%3Canimate attributeName='y' values='4;16;4' dur='1.2s' repeatCount='indefinite' begin='0.35s' calcMode='linear'/%3E%3Canimate attributeName='opacity' values='0;0.8;0' dur='1.2s' repeatCount='indefinite' begin='0.35s'/%3E%3C/rect%3E%3Crect x='44' y='4' width='10' height='14' rx='1' fill='%2360a0ff'%3E%3Canimate attributeName='opacity' values='0;0;0;1;0' dur='1.2s' repeatCount='indefinite' begin='0.7s' calcMode='linear'/%3E%3C/rect%3E%3Crect x='44' y='4' width='10' height='2' rx='0' fill='%23a8d0ff' opacity='0.7'%3E%3Canimate attributeName='y' values='4;16;4' dur='1.2s' repeatCount='indefinite' begin='0.7s' calcMode='linear'/%3E%3Canimate attributeName='opacity' values='0;0.8;0' dur='1.2s' repeatCount='indefinite' begin='0.7s'/%3E%3C/rect%3E%3Cline x1='0' y1='20' x2='56' y2='20' stroke='%2330608a' stroke-width='1' opacity='0.4'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  display: block !important;
}

.flex.items-center.justify-center.w-6.h-5::after {
  content: '' !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 60px !important;
  height: 26px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='26'%3E%3Cellipse cx='30' cy='13' rx='28' ry='10' fill='none' stroke='%2340aaff' stroke-width='0.5' opacity='0.18'%3E%3Canimate attributeName='opacity' values='0.08;0.28;0.08' dur='2.4s' repeatCount='indefinite'/%3E%3Canimate attributeName='rx' values='22;28;22' dur='2.4s' repeatCount='indefinite'/%3E%3C/ellipse%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  display: block !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

@keyframes crt-breathe {
  0%   { opacity: 0.6; }
  50%  { opacity: 1.0; }
  100% { opacity: 0.6; }
}

@media (max-width: 480px) {
  .flex.items-center.justify-center.w-6.h-5 {
    width: 48px !important;
    height: 22px !important;
  }
  .flex.items-center.justify-center.w-6.h-5::before {
    width: 44px !important;
    height: 18px !important;
  }
  .flex.items-center.justify-center.w-6.h-5::after {
    width: 48px !important;
    height: 20px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bg-gray-100\/90.relative.inline-block {
    transition: box-shadow 0.8s ease !important;
  }
}