/* 元方 · demo 前端壳（微信小程序 web-view 内的 H5）
 * =========================================================
 * 形态是用户 2026-10-18 拍板的：右上角角标 N 条 → 点开毛玻璃浮层 3 条证据 → 生成报告。
 *
 * 三条实现约束（照抄检测服务出参契约，前端不许自己编文案）：
 *   1. 边界声明必须显示（后端每次响应都带 boundary，前端直接渲染）
 *   2. 角标 N = 定案条数，不含弃权（弃权单独显示"没把握"）
 *   3. 语音输入：微信内用 WechatSI 插件；此处留了接口位 + 浏览器降级
 */
:root{
  --danger:#d93025; --warn:#e8890c; --ok:#1a7f37;
  /* 🔴 对话区半透明：让后面的球体尽量透出来（用户要"再透一点"） */
  --glass:rgba(255,255,255,.40); --line:rgba(0,0,0,.07);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
body{
  margin:0; font-family:-apple-system,"PingFang SC","Microsoft YaHei",sans-serif;
  background:linear-gradient(160deg,#eef2f7,#dfe6f0); color:#1a1a1a;
  min-height:100vh;
}
.wrap{max-width:520px;margin:0 auto;padding:16px 14px 40px;position:relative;z-index:1;}

/* ---- 中间呼吸粒子球体 + 全屏漩涡（背景氛围，体现"一直在帮你盯着"）----
 * 铺满全屏（inset:0），漩涡才能"占满整个屏幕"并向中心注入。
 * 放在内容下方（z-index:0，.wrap 是 1），pointer-events:none 不挡操作。
 * 平时蓝色、检测到疑点渐变红，由 app.js 控制。 */
#orb{
  position:fixed;left:0;top:0;width:100vw;height:100vh;
  z-index:0;pointer-events:none;
  opacity:.95;
  filter:blur(1px);          /* 只留一点点柔化，球体转动要看得清（用户要看到旋转） */
}

/* ---- 🔴 顶部常驻声明（政策硬要求：全程固定、禁止藏）----
 * 微信要求 AI 生成内容显著标注，且明确禁止「放角落小字/只弹一次窗/浅色隐藏」
 * ⇒ 放在页面顶部，全程可见。
 */
.topbar-notice{
  background:rgba(255,238,214,.92);border:1px solid rgba(190,120,40,.3);
  border-radius:10px;padding:9px 11px;font-size:12.5px;line-height:1.6;
  color:#7a4b12;margin-bottom:12px;font-weight:600;
}

/* ---- 顶栏：角标在右上角（用户已定位置） ---- */
.bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.title{font-size:17px;font-weight:600;}
/* 右上角：角标 + 小标题上下排列（小标题实时显示球体状态） */
.bar-right{display:flex;flex-direction:column;align-items:flex-end;gap:5px;}
.orbcap{
  font-size:11px;color:#9aa;letter-spacing:.3px;
  transition:color .4s ease;
}
.orbcap.alert{color:var(--danger);font-weight:600;}
.badge{
  display:flex;align-items:center;gap:4px;padding:6px 11px;border-radius:999px;
  background:var(--glass);backdrop-filter:blur(5px);border:1px solid var(--line);
  font-size:13px;cursor:pointer;
}
.badge.zero{color:var(--ok);}
.badge.has{color:var(--warn);font-weight:600;}
.badge:active{transform:scale(.97);}

/* ---- 对话区 ---- */
.bubble{
  position:relative;background:var(--glass);backdrop-filter:blur(5px);
  border:1px solid var(--line);border-radius:14px;padding:13px 14px;
  margin-bottom:10px;font-size:16px;line-height:1.65;white-space:pre-wrap;
}
.bubble.you{background:rgba(255,255,255,.70);margin-left:34px;}
.bubble.ai{margin-right:18px;}
.bubble .who{font-size:12px;color:#888;margin-bottom:5px;}

/* ---- 输入区（语音为主） ---- */
.inputbar{
  position:fixed;left:0;right:0;bottom:0;padding:10px 14px 16px;
  background:linear-gradient(180deg,rgba(238,242,247,0),rgba(238,242,247,.95) 34%);
}
/* ---- 大合成框（主流 AI App 形态）：语音图标左下、发送图标右下 ----
 * 为什么改成这样：原来是一排文字按钮（"按住说""发送"），又小又挤，
 * 老人手指点不准，跟他们日常用的微信/豆包也不一样 ⇒ 不会用。
 * 输入框也放大：min-height 42 → 62，字号 16px（iOS 不小于 16 才不会自动缩放页面）。
 */
.composer{
  max-width:520px;margin:0 auto;background:rgba(255,255,255,.50);
  border:1px solid var(--line);border-radius:22px;
  padding:10px 10px 8px;box-shadow:0 2px 10px rgba(20,30,50,.06);
}
.composer textarea{
  width:100%;min-height:62px;max-height:150px;resize:none;border:0;
  padding:4px 8px 6px;font-size:16px;line-height:1.6;background:transparent;
  font-family:inherit;outline:none;display:block;
}
.composer-actions{display:flex;align-items:center;justify-content:space-between;margin-top:2px;}
.iconbtn{
  width:42px;height:42px;flex:0 0 42px;border:0;border-radius:50%;
  background:rgba(0,0,0,.05);color:#444;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:transform .08s ease, background .15s ease;
  touch-action:none;        /* 按住说话：禁止长按误触发页面滚动/选择 */
}
.iconbtn:active{transform:scale(.92);}
.iconbtn .ico{width:21px;height:21px;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
/* 发送按钮：实心主色，是这一屏唯一的"主行动"，要最显眼 */
.iconbtn.primary{background:#1a73e8;color:#fff;box-shadow:0 2px 8px rgba(26,115,232,.35);}
.iconbtn.primary .ico{fill:currentColor;stroke:currentColor;}
.iconbtn.primary[disabled]{background:#bcd4f5;box-shadow:none;cursor:default;}
/* 录音中：实心红 + 呼吸动画，让"正在录"这件事不可能被忽略 */
.iconbtn.rec{background:var(--danger);color:#fff;animation:pulse 1.1s infinite;}
.iconbtn.rec .ico{fill:currentColor;}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(217,48,37,.45);}
                 50%{box-shadow:0 0 0 9px rgba(217,48,37,0);}}

/* ---- 📋 入口条：检查别家 AI 说的话 ---- */
.pasteentry{
  max-width:520px;margin:0 auto 8px;display:flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.45);border:1px solid var(--line);
  border-radius:14px;padding:9px 12px;font-size:13.5px;color:#334;cursor:pointer;
}
.pasteentry:active{background:rgba(255,255,255,.95);}
.pasteentry .pe-icon{font-size:15px;}
.pasteentry .pe-go{margin-left:auto;color:#9aa;font-size:17px;line-height:1;}

/* ---- 粘贴模块内部 ---- */
.plabel{font-size:12.5px;color:#666;font-weight:600;margin:10px 0 5px;}
.pbox{
  width:100%;box-sizing:border-box;resize:none;border:1px solid var(--line);
  border-radius:12px;padding:10px 12px;font-size:15px;line-height:1.6;
  background:#fff;font-family:inherit;outline:none;
}
.perr{min-height:17px;font-size:12.5px;color:var(--danger);margin-top:7px;}
.pnpriv{font-size:11.5px;color:#9a9;text-align:center;margin-top:10px;line-height:1.6;}
.btn{
  border:0;border-radius:12px;padding:12px 16px;font-size:15px;font-weight:600;
  background:#1a73e8;color:#fff;cursor:pointer;
}
.btn.rec{background:var(--danger);}
.btn.ghost{background:rgba(255,255,255,.9);color:#333;font-weight:400;}

/* ---- 毛玻璃浮层 ---- */
.mask{
  position:fixed;inset:0;background:rgba(20,24,30,.34);
  display:none;align-items:flex-end;z-index:50;
}
.mask.on{display:flex;}
.sheet{
  width:100%;max-width:520px;margin:0 auto;background:rgba(252,253,255,.93);
  backdrop-filter:blur(22px);border-radius:20px 20px 0 0;
  padding:18px 16px 26px;max-height:78vh;overflow:auto;
  animation:up .22s ease-out;
}
@keyframes up{from{transform:translateY(28px);opacity:.4}to{transform:none;opacity:1}}
.sheet h3{margin:0 0 4px;font-size:17px;}
.boundary{
  font-size:12px;color:#8a6d3b;background:rgba(255,244,222,.9);
  border:1px solid rgba(180,140,60,.25);border-radius:9px;padding:8px 10px;
  line-height:1.55;margin:10px 0 14px;
}
.ev{border-top:1px solid var(--line);padding:12px 0;}
.ev:first-of-type{border-top:0;}
.ev .t{font-size:15px;font-weight:600;display:flex;gap:7px;align-items:flex-start;}
.ev .badge-dot{width:8px;height:8px;border-radius:50%;margin-top:7px;flex:0 0 auto;}
.ev .d{font-size:14px;color:#444;margin-top:5px;line-height:1.6;}
.ev .src{font-size:11px;color:#999;margin-top:6px;}
.ev .q{font-size:12.5px;color:#666;background:rgba(0,0,0,.035);
  border-radius:7px;padding:6px 8px;margin-top:6px;line-height:1.5;}
.abstain{
  font-size:13px;color:var(--warn);background:rgba(255,238,214,.8);
  border-radius:9px;padding:9px 11px;margin-top:8px;
}
.foot{display:flex;gap:9px;margin-top:18px;}
.foot .btn{flex:1;}
.hint{font-size:12px;color:#999;text-align:center;margin-top:10px;}
/* 署名：FunASR/SenseVoice 许可要求，必须保留模型名与出处 */
.attrib{font-size:10.5px;color:#bbb;text-align:center;padding:10px 0 4px;}
/* 同意弹窗正文 */
#consent p{color:#555;}
#consent strong{color:#333;}

/* 麦克风不可用时的说明（人话，不暴露技术细节） */
.micnote{
  max-width:520px;margin:6px auto 0;font-size:11.5px;color:#8a6d3b;text-align:center;
  background:rgba(255,244,222,.7);border-radius:8px;padding:5px 9px;line-height:1.5;
}
/* 「口令不对？重新输入」入口：常驻但很淡，不抢视线 */
.keyline{
  max-width:520px;margin:4px auto 0;font-size:11px;color:#bbb;text-align:center;
}
.keyline a{color:#8ab4f8;text-decoration:none;border-bottom:1px dotted #8ab4f8;}
/* 回答来源标签：mock 期必须显眼，避免假答案被当成真数据 */
.provenance{
  font-weight:400;font-size:10.5px;color:#fff;background:#c0392b;
  border-radius:5px;padding:1px 5px;margin-left:5px;letter-spacing:.2px;
}