/* 颜色变量定义（写死值） */
.chat-container {
  --forge-dark: hsl(25, 35%, 12%);
  --forge-wood: hsl(30, 40%, 25%);
  --forge-parchment: hsl(40, 45%, 88%);
  --forge-iron: hsl(210, 8%, 35%);
  --forge-rust: hsl(15, 60%, 45%);
  --forge-glow: hsl(35, 100%, 65%);
  --text-ember: hsl(35, 80%, 95%);
  --text-soot: hsl(30, 20%, 15%);
}

/* === 消息气泡：羊皮纸+摆动物理 === */
.message-user {
  background: linear-gradient(135deg, 
    hsl(40, 45%, 88%) 0%, 
    hsl(38, 40%, 82%) 100%) !important;
  border: 2px solid hsl(30, 30%, 60%) !important;
  border-radius: 8px 8px 2px 8px !important;
  box-shadow: 
    inset 2px 2px 8px hsla(40, 50%, 95%, 0.8),
    3px 3px 0 hsla(30, 30%, 40%, 0.3),
    0 6px 12px hsla(0, 0%, 0%, 0.25) !important;
  color: hsl(30, 20%, 15%) !important;
  position: relative !important;
  animation: swing-in 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
}

.message-user::before {
  content: '';
  position: absolute;
  top: 8px;
  right: 8px;
  width: 10px;
  height: 10px;
  background: radial-gradient(circle, hsl(210, 15%, 45%) 40%, transparent 60%);
  border-radius: 50%;
  box-shadow: 
    -20px 0 0 -2px hsl(210, 15%, 45%),
    0 20px 0 -2px hsl(210, 15%, 45%);
}

.message-ai {
  background: linear-gradient(135deg,
    hsl(30, 40%, 25%) 0%,
    hsl(25, 35%, 18%) 100%) !important;
  border: 3px solid hsl(210, 8%, 35%) !important;
  border-radius: 2px 8px 8px 2px !important;
  box-shadow: 
    inset -2px -2px 6px hsla(35, 100%, 65%, 0.15),
    -3px 3px 0 hsla(210, 8%, 20%, 0.5),
    0 6px 12px hsla(0, 0%, 0%, 0.4) !important;
  color: hsl(35, 80%, 95%) !important;
  position: relative !important;
  animation: forge-appear 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.message-ai::after {
  content: '';
  position: absolute;
  bottom: 6px;
  left: 6px;
  width: 24px;
  height: 3px;
  background: linear-gradient(90deg, 
    hsl(15, 60%, 45%) 0%, 
    transparent 100%);
  border-radius: 2px;
  box-shadow: 0 8px 0 hsl(15, 60%, 45%);
}

/* === 输入框：锻造台+聚焦火花 === */
input[type="text"],
textarea,
.input-field {
  background: linear-gradient(180deg,
    hsl(25, 35%, 12%) 0%,
    hsl(30, 30%, 18%) 100%) !important;
  border: 3px solid hsl(210, 8%, 35%) !important;
  border-radius: 4px !important;
  color: hsl(35, 80%, 95%) !important;
  padding: 12px 16px !important;
  box-shadow: 
    inset 0 4px 8px hsla(0, 0%, 0%, 0.6),
    0 2px 4px hsla(0, 0%, 0%, 0.3) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
}

input[type="text"]:focus,
textarea:focus,
.input-field:focus {
  border-color: hsl(35, 100%, 65%) !important;
  box-shadow: 
    inset 0 4px 8px hsla(0, 0%, 0%, 0.6),
    0 0 0 3px hsla(35, 100%, 65%, 0.3),
    0 0 20px hsla(35, 100%, 65%, 0.4),
    0 4px 8px hsla(0, 0%, 0%, 0.4) !important;
  animation: forge-pulse 1.5s ease-in-out infinite !important;
}

input::placeholder,
textarea::placeholder {
  color: hsl(35, 40%, 55%) !important;
  font-style: italic !important;
}

/* === 按钮：铁砧弹簧物理 === */
button,
.button,
input[type="submit"] {
  background: linear-gradient(180deg,
    hsl(210, 10%, 45%) 0%,
    hsl(210, 8%, 30%) 50%,
    hsl(210, 10%, 25%) 100%) !important;
  border: 2px solid hsl(210, 15%, 20%) !important;
  border-radius: 6px !important;
  color: hsl(40, 60%, 90%) !important;
  padding: 10px 20px !important;
  box-shadow: 
    inset 0 1px 0 hsla(0, 0%, 100%, 0.2),
    0 4px 0 hsl(210, 15%, 20%),
    0 6px 12px hsla(0, 0%, 0%, 0.4) !important;
  transition: all 0.15s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
  position: relative !important;
  transform: translateY(0) !important;
  font-weight: 600 !important;
  text-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.5) !important;
}

button::before,
.button::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  right: 3px;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    hsla(40, 80%, 70%, 0.4) 50%,
    transparent 100%);
  border-radius: 2px;
}

button:hover,
.button:hover {
  background: linear-gradient(180deg,
    hsl(210, 10%, 50%) 0%,
    hsl(210, 8%, 35%) 50%,
    hsl(210, 10%, 30%) 100%) !important;
  box-shadow: 
    inset 0 1px 0 hsla(0, 0%, 100%, 0.3),
    0 4px 0 hsl(210, 15%, 20%),
    0 8px 16px hsla(35, 100%, 65%, 0.2),
    0 0 20px hsla(35, 100%, 65%, 0.15) !important;
  transform: translateY(-2px) !important;
}

button:active,
.button:active {
  background: linear-gradient(180deg,
    hsl(210, 8%, 30%) 0%,
    hsl(210, 10%, 25%) 100%) !important;
  box-shadow: 
    inset 0 3px 6px hsla(0, 0%, 0%, 0.4),
    0 1px 0 hsl(210, 15%, 20%),
    0 2px 4px hsla(0, 0%, 0%, 0.3) !important;
  transform: translateY(3px) scale(0.98) !important;
  transition: all 0.08s ease-out !important;
}

/* === 滚动条：铁轨风格 === */
::-webkit-scrollbar {
  width: 12px !important;
  background: hsl(30, 25%, 20%) !important;
}

::-webkit-scrollbar-track {
  background: linear-gradient(90deg,
    hsl(30, 25%, 18%) 0%,
    hsl(30, 25%, 22%) 50%,
    hsl(30, 25%, 18%) 100%) !important;
  border-left: 2px solid hsl(210, 8%, 25%) !important;
  box-shadow: inset 0 0 6px hsla(0, 0%, 0%, 0.4) !important;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg,
    hsl(210, 10%, 40%) 0%,
    hsl(210, 8%, 30%) 100%) !important;
  border: 2px solid hsl(210, 15%, 20%) !important;
  border-radius: 6px !important;
  box-shadow: 
    inset 0 1px 0 hsla(0, 0%, 100%, 0.2),
    0 2px 4px hsla(0, 0%, 0%, 0.3) !important;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg,
    hsl(210, 10%, 45%) 0%,
    hsl(210, 8%, 35%) 100%) !important;
  box-shadow: 
    inset 0 1px 0 hsla(0, 0%, 100%, 0.3),
    0 0 8px hsla(35, 100%, 65%, 0.3) !important;
}

/* === 物理动画关键帧 === */
@keyframes swing-in {
  0% {
    transform: translateX(100%) rotateZ(15deg);
    opacity: 0;
  }
  60% {
    transform: translateX(-5%) rotateZ(-3deg);
  }
  100% {
    transform: translateX(0) rotateZ(0);
    opacity: 1;
  }
}

@keyframes forge-appear {
  0% {
    transform: translateY(30px) scale(0.9);
    opacity: 0;
  }
  50% {
    transform: translateY(-5px) scale(1.02);
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

@keyframes forge-pulse {
  0%, 100% {
    box-shadow: 
      inset 0 4px 8px hsla(0, 0%, 0%, 0.6),
      0 0 0 3px hsla(35, 100%, 65%, 0.3),
      0 0 20px hsla(35, 100%, 65%, 0.4),
      0 4px 8px hsla(0, 0%, 0%, 0.4);
  }
  50% {
    box-shadow: 
      inset 0 4px 8px hsla(0, 0%, 0%, 0.6),
      0 0 0 3px hsla(35, 100%, 65%, 0.5),
      0 0 30px hsla(35, 100%, 65%, 0.6),
      0 4px 8px hsla(0, 0%, 0%, 0.4);
  }
}

/* === 链接样式 === */
a {
  color: hsl(35, 100%, 65%) !important;
  text-decoration: none !important;
  border-bottom: 1px dotted hsl(35, 100%, 65%) !important;
  transition: all 0.2s ease !important;
}

a:hover {
  color: hsl(35, 100%, 75%) !important;
  border-bottom-style: solid !important;
  text-shadow: 0 0 8px hsla(35, 100%, 65%, 0.5) !important;
}

/* === 文本选择 === */
::selection {
  background: hsl(35, 100%, 65%) !important;
  color: hsl(30, 20%, 15%) !important;
}