/* ====== 全局主题变量 ====== */
:root {
  --chat--color--primary: #2E8B57;       /* 主色调：绿色，自然风格 */
  --chat--color--secondary: #87CEEB;     /* 次色调：蓝色，海洋风格 */
  --chat--color--background: #ffffff;    /* 聊天窗口背景 */
  --chat--color--user-message: #DCF8C6;  /* 用户消息气泡 */
  --chat--color--bot-message: #F1F0F0;   /* 机器人消息气泡 */
  --chat--border-radius: 12px;           /* 圆角 */
  --chat--window--width: 380px;          /* 展开窗口宽度 */
  --chat--window--height: 560px;         /* 展开窗口高度 */
  --chat--toggle--size: 56px;            /* 悬浮按钮大小 */
  --chat--message--font-size: 0.95rem;   /* 消息字体大小 */
  --chat--font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

/* ====== 聊天窗口整体 ====== */
.n8n-chat {
  border-radius: var(--chat--border-radius);
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  font-family: var(--chat--font-family);
  background: var(--chat--color--background);
  overflow: hidden;
}

/* ====== 顶部标题栏 ====== */
.n8n-chat-header {
  /* 使用背景图片替代渐变 */
  background: url("http://iuhan.com/home/banner.jpg") no-repeat center center / cover;
  color: #fff;
  font-weight: bold;
  padding: 12px;
  text-align: center;
  font-size: 1rem;

  /* 可选：叠加半透明渐变让文字更清晰 */
  position: relative;
}
.n8n-chat-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(46,139,87,0.6), rgba(135,206,235,0.6));
  z-index: 0;
}
.n8n-chat-header span {
  position: relative;
  z-index: 1; /* 确保文字在渐变层之上 */
}

/* ====== 消息气泡 ====== */
.n8n-chat-message {
  border-radius: 10px;
  margin: 6px;
  padding: 8px 12px;
  font-size: var(--chat--message--font-size);
  line-height: 1.4;
  max-width: 80%;
}

/* 用户消息 */
.n8n-chat-message.user {
  background-color: var(--chat--color--user-message);
  align-self: flex-end;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* 机器人消息 */
.n8n-chat-message.bot {
  background-color: var(--chat--color--bot-message);
  align-self: flex-start;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

/* ====== 输入框 ====== */
.n8n-chat-input {
  border-top: 1px solid #ddd;
  padding: 10px;
  display: flex;
  gap: 8px;
  background: #fafafa;
}

.n8n-chat-input textarea {
  flex: 1;
  border-radius: 8px;
  border: 1px solid #ccc;
  padding: 8px;
  resize: none;
  font-family: var(--chat--font-family);
}

.n8n-chat-input button {
  background: var(--chat--color--primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 14px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.n8n-chat-input button:hover {
  background: #246b45;
}

/* ====== 悬浮按钮 ====== */
.n8n-chat-toggle {
  width: var(--chat--toggle--size);
  height: var(--chat--toggle--size);
  border-radius: 50%;
  background: var(--chat--color--primary);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  transition: transform 0.3s ease;
}

.n8n-chat-toggle:hover {
  transform: scale(1.05);
}

.n8n-chat-input textarea::placeholder {
  content: "请输入您的问题...";
  color: #999;
  font-size: 0.9rem;
}