/* ============================================================
   眼健康科普问答 · 页面专用样式
   设计思路：对话是主体，占满宽度与主要高度；说明性内容移到对话下方。
   ============================================================ */

/* ---------- 区块与紧急提示 ---------- */
.sec-chat{padding:34px 0 76px}
.ai-emg{margin-bottom:20px}

/* ---------- 对话主体（满宽） ---------- */
.chat-full{
  /* 高度随视口计算：保证下方输入框在首屏可见 */
  height:clamp(460px, calc(100vh - 330px), 720px);
  border-radius:var(--r-lg);
  box-shadow:0 1px 2px rgba(20,38,30,.04), 0 14px 40px rgba(20,38,30,.06);
}
.chat-full .chat-flow{padding:26px 26px 20px;gap:18px}

/* 底部：快捷问题 + 输入区 */
.chat-foot{border-top:1px solid var(--line);background:#fff}
.chat-foot .chips{padding:12px 20px 0;margin-bottom:10px;
  flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.chat-foot .chips::-webkit-scrollbar{display:none}
.chat-foot .chips .chip{flex:0 0 auto}
.chat-foot .chat-in{padding:0 20px 18px}

.chat-full textarea{
  border-radius:12px;padding:11px 14px;font-size:.95rem;min-height:54px;
  background:var(--paper);border-color:var(--line);
}
.chat-full textarea:focus{background:#fff}

/* ---------- 工具栏 ---------- */
.chat-bar{margin-top:12px;gap:12px}
.tool-left{display:flex;align-items:center;gap:10px;flex-wrap:wrap;min-width:0}
.tool-right{display:flex;align-items:center;gap:12px;margin-left:auto}

.tool-btn{
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 15px;border:1px solid var(--line);border-radius:999px;
  background:#fff;font-size:.86rem;font-weight:600;color:#3E5449;
  transition:.18s;white-space:nowrap;
}
.tool-btn svg{width:15px;height:15px;flex-shrink:0}
.tool-btn:not([disabled]):hover{border-color:var(--brand-3);color:var(--brand);background:var(--mint-soft)}
.tool-btn[disabled]{opacity:.45;cursor:not-allowed}
.tool-status{font-size:.78rem;color:var(--muted-2)}

/* ---------- 单独同意（与上传同处，小字但不隐藏） ---------- */
.consent-line{
  display:flex;gap:9px;align-items:flex-start;cursor:pointer;
  margin-top:12px;padding-top:12px;border-top:1px dashed var(--line);
}
.consent-line input{margin-top:3px;accent-color:var(--brand);flex-shrink:0;width:14px;height:14px}
.consent-line span{font-size:.75rem;line-height:1.6;color:var(--muted)}
.consent-line b{color:#33463D}

/* ---------- 说明卡（移到对话下方） ---------- */
.ai-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:24px}
.ai-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:24px 22px}
.ai-card h3{font-size:1rem;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--line-2)}
.ai-card .tips li{padding:6px 0;font-size:.88rem;line-height:1.8}
.ai-card-no h3{color:#8A5208}
.ai-card .hot{margin-top:12px;padding-top:0;border-top:0}

.ai-foot-note{
  margin-top:24px;padding:16px 18px;border-radius:var(--r);
  background:var(--paper-2);border:1px solid var(--line);
  font-size:.8rem;line-height:1.85;color:var(--muted);
}

/* ---------- 窄屏：对话铺满，输入区贴底 ---------- */
@media(max-width:900px){
  .ai-cards{grid-template-columns:1fr}
  .chat-full{height:min(560px, 66vh)}
}
@media(max-width:620px){
  .sec-chat{padding:12px 0 56px}
  /* 首屏让给对话：页头收紧、描述改小 */
  .phero-in{padding-top:22px;padding-bottom:20px}
  .phero p{font-size:.86rem;margin-top:8px}
  .ai-emg{margin-bottom:12px;font-size:.78rem;padding:10px 12px;line-height:1.7}
  .ai-emg svg{width:15px;height:15px;margin-top:3px}
  /* 对话区破出 .wrap 的内边距，做到满屏宽 */
  .chat-full{
    margin:0 -24px;border-radius:0;border-left:0;border-right:0;
    height:auto;box-shadow:none;
  }
  .chat-full .chat-flow{padding:16px 14px 10px;max-height:40vh;min-height:30vh}
  .chat-foot .chips{padding:10px 14px 0;margin-bottom:8px}
  .chat-foot .chat-in{padding:0 14px 16px}
  .tool-right small{display:none}
  .chat-bar{gap:10px}
  .tool-btn{padding:8px 12px;font-size:.82rem}
  .ai-cards{margin-top:18px;gap:14px}
  .ai-card{padding:20px 18px}
}

/* 对话刚开始时把问候语垂直居中，避免上方出现大片空白 */
.chat-flow:has(> .msg:only-child){justify-content:center}

/* 本页是对话页：全局底部操作条会压住「发送」按钮，这里让位给对话内容。
   打电话与导航入口在页头、页脚与说明卡里都仍然可达。 */
@media(max-width:620px){
  .mbar{display:none}
  body{padding-bottom:0}
  .chat-foot .chat-in{padding-bottom:14px}
}