/* 星一 · 网页版 —— Soft Clay 风格 */
* { margin: 0; padding: 0; box-sizing: border-box; }
:root {
  --bg: #fcf9f5;
  --primary: #fae09f;
  --primary-dark: #6f5c28;
  --text: #1c1c1a;
  --muted: #4c463a;
  --border: #efe1c5;
}
html, body { height: 100%; font-family: 'Segoe UI', 'Microsoft YaHei', -apple-system, sans-serif; background: var(--bg); color: var(--text); }
body { display: flex; justify-content: center; }

.container {
  width: 100%; max-width: 620px; height: 100vh;
  display: flex; flex-direction: column;
  background: var(--bg);
  box-shadow: 0 0 60px rgba(111,92,40,0.08);
}

/* 顶栏 */
.topbar { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--border); flex-shrink: 0; background: var(--bg); }
.avatar-mini { width: 44px; height: 44px; border-radius: 50%; background: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 22px; box-shadow: 0 4px 12px rgba(111,92,40,0.2); }
.topbar-info { flex: 1; }
.topbar-name { font-weight: 700; font-size: 17px; }
.topbar-status { font-size: 12px; color: #2e7d32; }
.topbar-badge { background: var(--primary); color: var(--primary-dark); font-size: 11px; font-weight: 600; padding: 4px 12px; border-radius: 999px; }

/* 对话区 */
.chat-area { flex: 1; overflow-y: auto; padding: 20px 16px; display: flex; flex-direction: column; gap: 14px; }
.msg { display: flex; }
.msg.ai { justify-content: flex-start; }
.msg.user { justify-content: flex-end; }
.bubble { max-width: 80%; padding: 12px 16px; border-radius: 20px; font-size: 14px; line-height: 1.6; white-space: pre-wrap; word-break: break-word; }
.msg.ai .bubble { background: #fff; border: 1px solid var(--border); border-top-left-radius: 6px; box-shadow: 0 2px 8px rgba(111,92,40,0.06); }
.msg.user .bubble { background: var(--primary); color: #554512; border-top-right-radius: 6px; }
.bubble.typing::after { content: '▌'; color: var(--primary-dark); animation: blink 0.8s step-end infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* 快捷功能 */
.quick-row { display: flex; gap: 8px; padding: 10px 16px; overflow-x: auto; flex-shrink: 0; scrollbar-width: none; }
.quick-row::-webkit-scrollbar { display: none; }
.chip { flex-shrink: 0; background: #fff; border: 1px solid var(--border); border-radius: 999px; padding: 8px 14px; font-size: 13px; color: var(--muted); cursor: pointer; transition: all 0.15s; }
.chip:hover { background: var(--primary); color: #554512; border-color: var(--primary); }

/* 景点面板 */
.travel-panel { margin: 0 16px 10px; padding: 14px; background: #fff; border: 1px solid var(--border); border-radius: 16px; flex-shrink: 0; }
.travel-title { font-size: 14px; font-weight: 700; color: var(--primary-dark); margin-bottom: 10px; }
.travel-search { display: flex; gap: 8px; }
.travel-search input { flex: 1; padding: 10px 14px; border: 1px solid var(--border); border-radius: 999px; font-size: 14px; outline: none; background: #fdf9f2; }
.travel-search input:focus { border-color: var(--primary); }
.travel-btn { padding: 10px 20px; border: none; border-radius: 999px; background: var(--primary); color: #554512; font-weight: 700; font-size: 14px; cursor: pointer; }
.travel-results { margin-top: 10px; max-height: 220px; overflow-y: auto; }
.spot-item { padding: 8px 10px; border-bottom: 1px solid #f5efe0; font-size: 13px; }
.spot-item:last-child { border-bottom: none; }
.spot-name { font-weight: 600; }
.spot-meta { color: #9c8a5a; font-size: 12px; margin-top: 2px; }

/* 输入区 */
.input-bar { display: flex; gap: 10px; padding: 14px 16px; border-top: 1px solid var(--border); flex-shrink: 0; background: var(--bg); }
.text-input { flex: 1; background: #fff; border: 1px solid var(--border); border-radius: 999px; padding: 12px 20px; font-size: 14px; outline: none; }
.text-input:focus { border-color: var(--primary); }
.send-btn { background: var(--primary); color: #554512; border: none; border-radius: 999px; padding: 0 24px; font-size: 14px; font-weight: 700; cursor: pointer; }
.send-btn:hover { box-shadow: 0 4px 12px rgba(111,92,40,0.2); }