:root {
  --bg: #f7f9fc;
  --fg: #0f172a;
  --muted: #475569;
  --accent: #2563eb;
  --border: #e2e8f0;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--bg); color: var(--fg); font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; }

#app { display: grid; grid-template-rows: 1fr auto; height: 100vh; }
.chat-area { padding: 16px; overflow-y: auto; background: #ffffff; display: flex; flex-direction: column; gap: 8px; min-height: 0; height: 100%; }
.ops-area { padding: 12px 16px; border-top: 1px solid var(--border); background: #ffffff; overflow-x: hidden; }
.ops-area .row { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; margin-bottom: 8px; }
.ops-area .row:last-child { margin-bottom: 4px; }
.ops-area .row:not(.row-send) { position: relative; display: flex; justify-content: center; align-items: center; }
.ops-area .row:not(.row-send) button { margin: 0 auto; }
.ops-area .row.row-send { grid-template-columns: 1fr auto; }
.ops-area .row.row-send .right { display: flex; gap: 8px; align-items: center; }

select#model-select { background: #ffffff; color: var(--fg); border: 1px solid var(--border); border-radius: 8px; padding: 6px; }

textarea#input { width: 100%; resize: none; background: #ffffff; color: var(--fg); border: 1px solid var(--border); border-radius: 8px; min-height: 44px; height: auto; line-height: 1.5; padding: 8px 12px; overflow: hidden; font-family: inherit; font-size: 16px; font-weight: 400; }
button { background: var(--accent); color: white; border: none; border-radius: 8px; padding: 8px 14px; cursor: pointer; }
button:hover { filter: brightness(1.1); }

.msg { padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; margin: 4px 0; max-width: 80%; }
.msg.user { background: #f9e1d1; align-self: flex-end; text-align: left; }
.msg.assistant { background: #f8fafc; align-self: flex-start; }
.msg .role { font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.msg .content { white-space: normal; }
/* 用户发言保留换行符，按输入显示多行 */
.msg.user .content { white-space: pre-wrap; }
.msg .content p { margin: 6px 0; }

.thinking {
  margin-top: 8px;
  border: 1px dashed var(--border);
  padding: 8px;
  background: #f1f5f9;
}
.thinking .toggle {
  color: var(--muted);
  font-size: 12px;
  display: flex;
  justify-content: flex-start; /* 按需将按钮放在标题右侧，而非最右边 */
  align-items: center;
  gap: 6px;
}
.thinking .toggle .title { font-weight: 600; }
.thinking .toggle-btn {
  background: transparent;
  color: var(--accent);
  border: none; /* 作为图标按钮，不显示边框 */
  border-radius: 4px;
  padding: 0 2px; /* 紧凑，贴近文字右侧 */
  cursor: pointer;
  font-size: 12px;
  line-height: 1; /* 防止按钮高度拉伸 */
}
.thinking .toggle-btn:hover { filter: brightness(1.05); }
.thinking .body { display: none; margin-top: 6px; color: #334155; white-space: normal; line-height: 1.5; }
.thinking .body p { margin: 4px 0; }
.thinking.open .body { display: block; }

/* Assistant final answer: add spacing from thinking and use blue color */
.msg.assistant .content {
  margin-top: 12px;
  color: #109406;
}

.status { color: var(--muted); margin-left: 10px; font-size: 12px; }

/* Streaming status indicator */
.status-indicator { color: var(--muted); font-size: 12px; display: none; }
.status-indicator.show { display: inline; }
.status-indicator::after {
  content: '...';
  display: inline-block;
  width: 0ch;
  overflow: hidden;
  vertical-align: baseline;
  animation: status-dots 1s steps(3, end) infinite;
}
@keyframes status-dots { to { width: 3ch; } }

/* Thinking area inline indicator (shows inside 思考过程 box) */
.thinking-indicator { color: #94a3b8; font-size: 14px; display: none; margin-bottom: 6px; text-align: center; }
.thinking-indicator.big { font-size: 22px; font-weight: 600; }
.thinking-indicator.show { display: block; }
.thinking-indicator.left { text-align: left; }
.thinking-indicator .line { margin: 4px 0; }

/* Sequential indicator animations */
.thinking-indicator .line.slide-out-left {
  animation: indicator-slide-out-left 0.4s ease forwards;
}
@keyframes indicator-slide-out-left {
  to { transform: translateX(-16px); opacity: 0; }
}
.thinking-indicator .line.enter {
  animation: indicator-enter 0.25s ease both;
}
@keyframes indicator-enter {
  from { opacity: 0; transform: translateX(8px); }
  to { opacity: 1; transform: none; }
}
.thinking-indicator::after {
  content: '';
  display: none;
}

/* Toast */
.toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(15, 23, 42, 0.92);
  color: #fff;
  padding: 8px 12px;
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1000;
  text-align: center;
  pointer-events: none;
}
.toast.show { opacity: 1; }

/* Input wrap with centered placeholder */
.input-wrap { position: relative; }
.input-wrap .placeholder {
  position: absolute;
  left: 12px;
  top: 8px; /* 与 textarea 的 padding-top 一致，使光标与文字同一行 */
  transform: none;
  line-height: 1.5; /* 与 textarea 的 line-height 保持一致 */
  color: #94a3b8;
  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  pointer-events: none;
}
.input-wrap textarea#input { padding: 8px 12px; }
/* 多行输入：禁用缩放，交由脚本自适应高度 */
.input-wrap textarea#input {
  resize: none;
  overflow-y: hidden; /* autoResizeTextarea 控制高度，避免出现滚动条 */
  white-space: normal; /* 允许换行 */
}

/* Version badge inline with button */
.version-badge {
  font-size: 12px;
  color: #64748b;
  /* 居中显示：依赖父容器 .row 的 flex 居中 */
  position: static;
}
.welcome-banner {
  display: none;
  padding: 8px 12px;
  border: 1px dashed var(--border);
  border-radius: 10px;
  background: #f1f5f9;
  color: #334155;
}
.welcome-banner.show { display: block; }

/* Quick replies bar above input */
.quick-replies {
  display: flex;
  gap: 8px;
  width: 100%;
  max-width: 100%;
  flex-wrap: wrap;
  overflow: hidden; /* 去掉左右滚动，超出两行的内容隐藏 */
  max-height: 92px; /* 放宽为两行完全可见的高度（含间距和内边距） */
  padding: 4px 0;
  margin-bottom: 8px;
  /* 隐藏滚动条：Firefox/旧版 Edge */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge legacy */
}
.quick-replies::-webkit-scrollbar { display: none; }
.quick-reply {
  background: #f1f5f9;
  color: #334155;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 6px 10px;
  cursor: pointer;
  flex: 0 0 auto;
  font-size: 14px;
}
.quick-reply:hover { background: #e2e8f0; }

/* 分组着色：限制为5种且区分更明显 */
.quick-reply.qr-g0 { background: #fef3c7; border-color: #fcd34d; color: #7c2d12; }
.quick-reply.qr-g1 { background: #dbeafe; border-color: #93c5fd; color: #1e3a8a; }
.quick-reply.qr-g2 { background: #dcfce7; border-color: #86efac; color: #14532d; }
.quick-reply.qr-g3 { background: #e0e7ff; border-color: #a5b4fc; color: #3730a3; }
.quick-reply.qr-g4 { background: #fee2e2; border-color: #fca5a5; color: #7f1d1d; }