/* ============================================================
   小湘 · 湖南菜品查询手册
   ============================================================ */
:root{
  --ink:#241b16;
  --ink-2:#54423a;
  --muted:#8a766a;
  --paper:#fdfaf3;
  --card:#ffffff;
  --line:#ecdfcb;
  --chili:#b23a2c;
  --chili-2:#8c271c;
  --gold:#c98a2b;
  --gold-soft:#fbf0dc;
  --ok:#3a6b4a;
  --bad:#a4261d;
  --shadow:0 1px 2px rgba(36,27,22,.05), 0 8px 24px rgba(36,27,22,.07);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC",system-ui,sans-serif;
  color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;
}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:#e0d2ba;border-radius:4px}
::-webkit-scrollbar-track{background:transparent}

/* ---------------- 布局 ---------------- */
.app{
  height:100dvh;display:grid;
  grid-template-columns:minmax(0,1fr) 330px;
  grid-template-rows:auto minmax(0,1fr);
  grid-template-areas:"top top" "chat rail";
}
.topbar{grid-area:top}.chat{grid-area:chat}.rail{grid-area:rail}

/* ---------------- 顶栏 ---------------- */
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:12px 20px;background:rgba(253,250,243,.93);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line);z-index:10;
}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.avatar{
  width:40px;height:40px;border-radius:12px;flex:0 0 auto;display:grid;place-items:center;
  background:linear-gradient(160deg,var(--chili),var(--chili-2));
  color:#fff4e6;font-weight:800;font-size:17px;
  box-shadow:0 2px 0 rgba(0,0,0,.14), inset 0 1px 0 rgba(255,255,255,.22);
}
.who h1{font-size:16px;font-weight:800;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.who p{font-size:11.5px;color:var(--muted);margin-top:2px;display:flex;align-items:center;gap:6px}
.dot{width:6px;height:6px;border-radius:50%;background:#4ca46a;box-shadow:0 0 0 3px rgba(76,164,106,.15)}
.dot.err{background:#d24b3f;box-shadow:0 0 0 3px rgba(210,75,63,.15)}
.actions{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.btn{
  font-size:12px;font-weight:600;padding:7px 12px;border-radius:9px;
  color:var(--ink-2);background:#f6efe1;border:1px solid transparent;transition:.16s;
}
.btn:hover{background:#efe4cf;color:var(--ink)}
.btn.ghost{background:transparent;border-color:var(--line)}
.btn.ghost:hover{background:#f6efe1}

/* ---------------- 对话 ---------------- */
.chat{display:flex;flex-direction:column;min-height:0;position:relative}
.messages{flex:1;min-height:0;overflow-y:auto;padding:26px 24px 10px;scroll-behavior:smooth}
.wrap{max-width:780px;margin:0 auto;display:flex;flex-direction:column;gap:18px;min-height:100%;justify-content:center}

.msg{display:flex;gap:10px;animation:rise .28s ease both}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.msg .mini{
  width:28px;height:28px;border-radius:9px;flex:0 0 auto;display:grid;place-items:center;
  font-size:11.5px;font-weight:800;margin-top:2px;
  background:linear-gradient(160deg,var(--chili),var(--chili-2));color:#fff4e6;
}
.msg.user{flex-direction:row-reverse}
.msg.user .mini{background:#f2e7d3;color:var(--chili-2)}
.bubble{
  max-width:min(600px,86%);padding:13px 16px;border-radius:14px;
  font-size:14px;line-height:1.78;background:var(--card);
  border:1px solid var(--line);box-shadow:var(--shadow);
}
.msg.user .bubble{background:var(--chili);color:#fdf3ea;border-color:transparent;box-shadow:0 8px 20px rgba(178,58,44,.2)}
.bubble p + p{margin-top:8px}
.bubble ul{margin:6px 0 0;padding:0;list-style:none}
.bubble li{position:relative;padding-left:16px;margin-top:5px}
.bubble li::before{content:"";position:absolute;left:3px;top:.74em;width:5px;height:5px;border-radius:50%;background:var(--gold)}
.bubble .lead{font-weight:700;color:var(--chili-2)}
.bubble .note{
  margin-top:10px;padding:8px 11px;border-radius:9px;background:var(--gold-soft);
  color:#a4551f;font-size:12.5px;border-left:3px solid var(--gold);
}
.srcs{margin-top:11px;padding-top:10px;border-top:1px dashed var(--line);display:flex;flex-wrap:wrap;gap:6px}
.src{
  font-size:11px;padding:3px 9px;border-radius:999px;background:#f8f1e4;color:#7a6448;
  border:1px solid #ecdfc8;transition:.15s;
}
.src:hover{background:#f1e6d2;color:var(--ink)}
.src b{color:var(--gold);font-weight:700}
.meta-line{margin-top:8px;font-size:10.5px;color:#b0a091}

/* 反馈按钮 */
.fb{display:flex;align-items:center;gap:8px;margin-top:10px}
.fb-btn{
  font-size:11.5px;padding:4px 10px;border-radius:999px;
  background:#fbf7ef;border:1px solid #ecdfc8;color:#7a6448;transition:.15s;
}
.fb-btn:hover:not(:disabled){background:#f4ead8;color:var(--ink)}
.fb-btn[disabled]{opacity:.5;cursor:default}
.fb-btn.on{background:var(--chili);border-color:var(--chili);color:#fff4e6;opacity:1}
.fb-done{font-size:11px;color:var(--ok)}

/* 打字中 */
.typing{display:flex;gap:4px;padding:15px 16px}
.typing i{width:6px;height:6px;border-radius:50%;background:#d3c4b2;animation:blink 1.1s infinite}
.typing i:nth-child(2){animation-delay:.15s}
.typing i:nth-child(3){animation-delay:.3s}
@keyframes blink{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

/* 欢迎卡 */
.welcome{border:1px solid var(--line);background:var(--card);border-radius:16px;padding:20px 22px;box-shadow:var(--shadow)}
.welcome h2{font-size:17px;font-weight:800;margin-bottom:6px}
.welcome p{font-size:13px;color:var(--ink-2);line-height:1.75}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.chip{
  font-size:12.5px;padding:7px 13px;border-radius:999px;background:#f8f1e4;
  border:1px solid #ecdfc8;color:#6a5744;transition:.16s;
}
.chip:hover{background:var(--chili);border-color:var(--chili);color:#fdf3ea;transform:translateY(-1px)}

/* ---------------- 输入区 ---------------- */
.composer{padding:10px 24px 18px;background:linear-gradient(180deg,rgba(253,250,243,0),var(--paper) 28%)}
.composer-inner{max-width:780px;margin:0 auto}
.box{
  display:flex;align-items:flex-end;gap:10px;background:var(--card);
  border:1px solid var(--line);border-radius:16px;padding:8px 8px 8px 16px;
  box-shadow:var(--shadow);transition:border-color .16s, box-shadow .16s;
}
.box:focus-within{border-color:#ddb9a2;box-shadow:0 0 0 4px rgba(201,138,43,.09), var(--shadow)}
textarea{
  flex:1;border:none;outline:none;resize:none;background:transparent;
  font-family:inherit;font-size:14px;line-height:1.6;color:var(--ink);max-height:140px;padding:7px 0;
}
textarea::placeholder{color:#b7a595}
.send{
  flex:0 0 auto;height:36px;padding:0 16px;border-radius:11px;
  background:var(--chili);color:#fdf3ea;font-size:13px;font-weight:700;
  box-shadow:0 2px 0 rgba(0,0,0,.15);transition:.15s;
}
.send:hover{background:var(--chili-2)}
.send:disabled{opacity:.45;cursor:not-allowed}
.composer-meta{display:flex;justify-content:space-between;align-items:center;margin-top:8px;font-size:11px;color:#b0a091;padding:0 4px}
.ctx-inline{display:none}

/* ---------------- 右栏 ---------------- */
.rail{border-left:1px solid var(--line);background:#faf4e9;padding:18px 16px;overflow-y:auto;display:flex;flex-direction:column;gap:14px}
.panel{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 15px;box-shadow:var(--shadow)}
.panel h2{
  font-size:12px;font-weight:800;letter-spacing:.06em;color:var(--ink-2);
  display:flex;align-items:baseline;justify-content:space-between;margin-bottom:12px;
}
.panel h2 span{font-size:9.5px;font-weight:600;letter-spacing:.06em;color:#b5a595}

.hot{display:flex;flex-direction:column;gap:6px}
.hot-q{
  display:flex;align-items:center;gap:8px;text-align:left;width:100%;
  padding:8px 10px;border-radius:10px;background:#fdf8ef;border:1px solid #efe4d2;
  font-size:12px;color:var(--ink-2);transition:.15s;
}
.hot-q:hover{background:#f7efe0;border-color:#e3d2b6;color:var(--ink)}
.hot-q em{margin-left:auto;font-style:normal;font-size:10px;color:var(--gold);flex:0 0 auto}

.top-dishes{display:flex;flex-direction:column;gap:5px}
.dish-row{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-2)}
.dish-row b{font-weight:700;color:var(--ink)}
.dish-row .bar{flex:1;height:4px;border-radius:2px;background:#f2e8d6;overflow:hidden}
.dish-row .bar i{display:block;height:100%;background:var(--chili);opacity:.75;border-radius:2px}
.dish-row em{font-style:normal;font-size:10.5px;color:var(--muted);min-width:24px;text-align:right}

.meter{height:9px;border-radius:5px;background:#f2ead9;overflow:hidden;display:flex}
.meter i{display:block;height:100%;transition:width .3s ease}
.meter .m1{background:var(--chili)}
.meter .m2{background:#d0764f}
.meter .m3{background:var(--gold)}
.meter-num{display:flex;justify-content:space-between;font-size:10.5px;color:var(--muted);margin-top:7px}
.legend{list-style:none;margin-top:10px;display:grid;gap:6px}
.legend li{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--ink-2)}
.legend i{width:7px;height:7px;border-radius:2px;flex:0 0 auto}
.legend b{margin-left:auto;font-variant-numeric:tabular-nums;font-weight:700;color:var(--ink)}
.empty{font-size:11.5px;color:#b0a091;line-height:1.7;text-align:center;padding:10px 0}

/* ---------------- 弹窗 ---------------- */
.modal{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:20px;background:rgba(36,27,22,.44);backdrop-filter:blur(3px)}
.modal[hidden]{display:none}
.modal-card{
  width:min(760px,100%);max-height:min(86dvh,760px);background:var(--paper);
  border-radius:18px;overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 30px 80px rgba(30,20,14,.36);animation:pop .24s cubic-bezier(.2,.9,.3,1.1) both;
}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid var(--line);background:var(--card)}
.modal-head h2{font-size:15px;font-weight:800}
.modal-head button{font-size:20px;color:var(--muted);line-height:1;padding:2px 6px;border-radius:6px}
.modal-head button:hover{background:#f6efe1;color:var(--ink)}
.modal-body{padding:20px;overflow-y:auto;font-size:13.5px;line-height:1.85;color:var(--ink-2)}
.modal-body h3{font-size:13px;font-weight:800;color:var(--chili-2);margin:18px 0 8px}
.modal-body h3:first-child{margin-top:0}
.modal-body p + p{margin-top:8px}
.modal-body code{font-family:"SFMono-Regular",Consolas,monospace;font-size:12px;background:#f4ebdb;padding:1px 5px;border-radius:4px;color:#8a5a12}
.prompt-box{
  background:#2a1c17;color:#f0dfd0;border-radius:12px;padding:16px 18px;
  font-family:"SFMono-Regular",Consolas,monospace;font-size:12.5px;line-height:1.9;
  white-space:pre-wrap;
}
.kb-search{width:100%;padding:9px 12px;border-radius:10px;border:1px solid var(--line);background:var(--card);font-family:inherit;font-size:13px;margin-bottom:12px;outline:none}
.kb-search:focus{border-color:#ddb9a2}
.kb-list{display:grid;gap:8px}
.kb-item{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px 13px}
.kb-item .h{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.kb-item .h b{font-size:13px;color:var(--ink)}
.kb-item .h span{font-size:10.5px;color:#b5a595}
.kb-item p{margin-top:4px;font-size:12px;color:var(--ink-2);line-height:1.7}

.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
.stat-box{background:var(--card);border:1px solid var(--line);border-radius:11px;padding:12px 6px;text-align:center}
.stat-box b{display:block;font-size:22px;font-weight:900;color:var(--chili-2);font-variant-numeric:tabular-nums}
.stat-box em{display:block;margin-top:2px;font-style:normal;font-size:10.5px;color:var(--muted)}

/* ---------------- 响应式 ---------------- */
@media (max-width:1000px){
  .app{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);grid-template-areas:"top" "chat"}
  .rail{display:none}
  .ctx-inline{display:inline}
  .messages{padding:18px 14px 8px}
  .composer{padding:8px 14px 14px}
  .topbar{padding:10px 14px}
  .btn{padding:6px 9px;font-size:11px}
  .bubble{max-width:88%}
}
@media (max-width:520px){
  .actions .btn[data-open="stats"]{display:none}
  .who h1{font-size:14.5px}
  .bubble{font-size:13.5px}
}