:root{
  --brand:#DD5C34;
  --brand-d:#C24A26;
  --brand-soft:#FCEDE6;
  --ink:#2C2521;
  --ink2:#6F6058;
  --ink3:#A09186;
  --line:#EEE3D6;
  --line2:#F5EEE5;
  --warm:#FBF6ED;
  --ok:#3E8E68;
  --danger:#C0392B;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Segoe UI",sans-serif;
  background:
    radial-gradient(1100px 520px at 50% -8%, #FFFAF2 0%, rgba(255,250,242,0) 62%),
    linear-gradient(170deg,#FCF7F0 0%,#F7EEE3 52%,#F0E4D5 100%);
  color:var(--ink);
  display:flex;flex-direction:column;align-items:center;
  height:100dvh;padding:16px 12px 8px;
  user-select:none;
}

/* ================= 顶部 ================= */
.topbar{
  width:100%;max-width:680px;display:flex;align-items:center;justify-content:space-between;
  flex:0 0 auto;margin-bottom:14px;gap:12px;
}
.brand{display:flex;align-items:center;gap:9px}
.brand .mark{
  width:34px;height:34px;border-radius:11px;
  background:linear-gradient(150deg,#E8714A,#C9421F);
  box-shadow:0 6px 14px -4px rgba(201,66,31,.55);
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:17px;font-weight:700;letter-spacing:1px;
}
.brand h1{font-size:17px;margin:0;letter-spacing:.14em;font-weight:700}
.brand .sub{font-size:11px;color:var(--ink3);letter-spacing:.06em;margin-top:2px}

.seg{display:flex;background:#fff;border-radius:14px;padding:4px;box-shadow:0 3px 14px -4px rgba(120,90,60,.18)}
.seg button{
  border:0;background:transparent;padding:9px 20px;border-radius:11px;
  color:var(--ink3);font-size:13.5px;font-weight:600;cursor:pointer;
  transition:.22s;font-family:inherit;
}
.seg button.active{background:var(--brand);color:#fff;box-shadow:0 5px 14px -4px rgba(221,92,52,.6)}

/* ================= 手机壳 ================= */
.stage{flex:1 1 auto;display:flex;align-items:center;justify-content:center;min-height:0;width:100%}
.phone{
  width:min(392px, 94vw, calc((100dvh - 128px) * 0.49));
  aspect-ratio:0.49;
  background:#141110;
  border-radius:50px;
  padding:11px;
  box-shadow:0 45px 90px -35px rgba(90,55,30,.5), 0 14px 34px -14px rgba(90,55,30,.28), inset 0 0 0 1.5px #3a3330;
  position:relative;
  display:none;
}
.phone.show{display:block;animation:pop .34s cubic-bezier(.2,.9,.3,1.2)}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
.screen{
  width:100%;height:100%;background:#fff;border-radius:40px;overflow:hidden;position:relative;
}
.island{
  position:absolute;top:9px;left:50%;transform:translateX(-50%);
  width:100px;height:25px;background:#141110;border-radius:14px;z-index:60;
}

/* ================= 老人端 ================= */
.elder{
  position:relative;
  display:flex;flex-direction:column;height:100%;
  background:
    radial-gradient(420px 260px at 50% 0%, #FFFDF8 0%, rgba(255,253,248,0) 70%),
    linear-gradient(180deg,#FDF9F1 0%,#FBF4E9 100%);
  padding-top:46px;
}
.elder-top{padding:8px 20px 0;flex:0 0 auto}
.elder-status{
  display:flex;align-items:center;justify-content:center;gap:6px;
  font-size:11.5px;color:#B39B84;letter-spacing:.1em;
}
.elder-status .dot{width:6px;height:6px;border-radius:50%;background:#8BC48C;box-shadow:0 0 0 3px rgba(139,196,140,.2)}

.fam-row{display:flex;justify-content:center;gap:20px;padding:16px 0 6px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.fam-row::-webkit-scrollbar{display:none}
.fam-row.many{gap:13px;padding:14px 4px 6px;justify-content:flex-start}
.fam-row.many .ava{width:52px;height:52px;font-size:21px}
.fam-row.many .ava.two{font-size:13px;letter-spacing:1px}
.fam-row.many .nm{font-size:13px}
.fam{background:none;border:0;padding:0;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px;font-family:inherit;flex:0 0 auto}
.fam .ava{
  width:62px;height:62px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:24px;font-weight:600;color:#fff;
  box-shadow:0 6px 16px -8px rgba(80,60,45,.5);
  transition:.25s;position:relative;
  border:3px solid transparent;
}
.fam.on .ava{transform:translateY(-3px);border-color:#fff;box-shadow:0 0 0 3.5px var(--brand),0 10px 22px -8px rgba(221,92,52,.65)}
/* 头像里放两字身份（儿子/儿媳/孙女…）时缩小字号 */
.fam .ava.two{font-size:15px;letter-spacing:2px;font-weight:700}
.fam .nm{font-size:15px;color:#9C8674;font-weight:600;transition:.2s}
.fam.on .nm{color:var(--ink);font-weight:800;font-size:16px}

.chat{flex:1 1 auto;overflow-y:auto;padding:10px 20px 4px}
.chat::-webkit-scrollbar{width:0}
.msg{margin-bottom:14px;animation:fi .3s ease}
@keyframes fi{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.msg .who{font-size:11px;color:#BBA48F;margin-bottom:5px;letter-spacing:.04em}
.msg.ai .who{color:#B79A7F}
.msg .bub{
  font-size:18.5px;line-height:1.72;padding:12px 16px;border-radius:18px;
  letter-spacing:.01em;word-break:break-word;
}
.msg.me{align-items:flex-end;display:flex;flex-direction:column}
.msg.me .bub{background:#fff;border:1.5px solid #F0E4D4;color:#5B493C;border-bottom-right-radius:6px;max-width:88%}
.msg.ai .bub{background:linear-gradient(160deg,#FFF3E9,#FFE9DA);color:#3A2C23;border-bottom-left-radius:6px;box-shadow:0 6px 18px -12px rgba(210,120,80,.6)}

.syscard{
  margin:4px 0 16px;border-radius:16px;padding:14px 16px;
  background:#FFF6E8;border:1.5px solid #F3D9AE;
}
.syscard .t{font-size:14px;font-weight:800;color:#A9631B;display:flex;align-items:center;gap:6px;margin-bottom:6px}
.syscard .d{font-size:13.5px;color:#8A6A46;line-height:1.65}
.syscard .call{
  margin-top:10px;background:#fff;border-radius:11px;padding:9px 12px;
  display:flex;align-items:center;gap:8px;font-size:13.5px;color:#3E8E68;font-weight:600;
  border:1px solid #DDEBE2;
}
.syscard .call .ph{animation:ring 1.6s ease-in-out infinite}
@keyframes ring{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}

.think{display:flex;gap:5px;padding:12px 16px;background:#FFF3E9;border-radius:18px;width:fit-content;border-bottom-left-radius:6px}
.think i{width:7px;height:7px;border-radius:50%;background:#D9A98C;animation:bl 1.2s infinite}
.think i:nth-child(2){animation-delay:.18s}
.think i:nth-child(3){animation-delay:.36s}
@keyframes bl{0%,80%,100%{opacity:.35;transform:translateY(0)}40%{opacity:1;transform:translateY(-4px)}}

.wave{display:flex;align-items:center;justify-content:center;gap:4px;height:38px;color:var(--brand)}
.wave i{width:4px;height:100%;border-radius:3px;background:currentColor;transform-origin:center;animation:bar 1s ease-in-out infinite}
@keyframes bar{0%,100%{transform:scaleY(.22)}50%{transform:scaleY(1)}}

.elder-bot{flex:0 0 auto;padding:0 20px 22px}
.reminder{
  background:#fff;border:1.5px solid #F2D9C9;border-radius:16px;padding:12px 14px;
  margin-bottom:12px;display:none;box-shadow:0 10px 24px -16px rgba(200,120,80,.7);
  animation:up .4s cubic-bezier(.2,.9,.3,1.2);
}
.reminder.show{display:block}
@keyframes up{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.reminder .r1{display:flex;align-items:center;gap:8px;font-size:15.5px;font-weight:700;color:#3A2C23}
.reminder .r1 .bell{font-size:17px}
.reminder .r2{font-size:12.5px;color:#A09186;margin:5px 0 10px 25px}
.reminder button{
  width:100%;border:0;background:var(--brand);color:#fff;font-size:15px;font-weight:700;
  padding:11px;border-radius:12px;font-family:inherit;cursor:pointer;
}

.kb-btn{
  width:100%;border:1.5px solid #EFD9C9;background:#fff;color:#B5704A;
  border-radius:14px;padding:10px;font-size:14px;font-weight:600;font-family:inherit;
  margin-bottom:10px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px;
}
.kb-btn:active{background:#FBF1E9}

.talk{
  width:100%;height:158px;border:0;border-radius:79px;cursor:pointer;
  background:linear-gradient(180deg,#EB6F45 0%,#D14E27 100%);
  box-shadow:0 16px 32px -12px rgba(209,78,39,.65), inset 0 -5px 0 rgba(0,0,0,.13), inset 0 2px 0 rgba(255,255,255,.28);
  color:#fff;font-family:inherit;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  transition:transform .12s ease, box-shadow .12s ease;
  position:relative;overflow:hidden;
}
.talk .mic{font-size:33px;line-height:1;filter:drop-shadow(0 3px 4px rgba(0,0,0,.18))}
.talk .lb{font-size:25px;font-weight:800;letter-spacing:.18em;text-indent:.18em}
.talk .hint{font-size:12px;opacity:.82;letter-spacing:.06em}
.talk.press{transform:scale(.965);box-shadow:0 8px 18px -10px rgba(209,78,39,.7), inset 0 -2px 0 rgba(0,0,0,.13)}
.talk.live{background:linear-gradient(180deg,#E2623A,#B93F1B)}
.talk .livewave{position:absolute;inset:0;display:none;align-items:center;justify-content:center;flex-direction:column;gap:10px}
.talk.live .livewave{display:flex}
.talk.live .idle{display:none}
.talk .idle{display:flex;flex-direction:column;align-items:center;gap:7px}
.talk.live .livewave .wave{color:#fff;height:34px}
.talk.live .livewave .lt{font-size:17px;font-weight:700;letter-spacing:.12em}

.toast{
  position:absolute;left:50%;bottom:190px;transform:translate(-50%,10px);
  background:rgba(44,37,33,.88);color:#fff;font-size:12.5px;padding:9px 16px;border-radius:20px;
  opacity:0;transition:.25s;pointer-events:none;z-index:50;white-space:nowrap;
}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* 绑定引导覆盖层 */
.bind-overlay{
  position:absolute;inset:0;background:linear-gradient(180deg,#FDF9F1,#FBF4E9);
  z-index:40;display:none;flex-direction:column;align-items:center;justify-content:center;
  padding:30px 26px;text-align:center;
}
.bind-overlay.show{display:flex;animation:fi .3s ease}
.bind-overlay .ico{width:64px;height:64px;border-radius:22px;background:linear-gradient(150deg,#E8714A,#C9421F);
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:26px;margin-bottom:14px;
  box-shadow:0 14px 30px -14px rgba(201,66,31,.9)}
.bind-overlay .bt{font-size:19px;font-weight:800;color:#3A2C23;line-height:1.5}
.bind-overlay .bc{font-size:48px;font-weight:800;letter-spacing:.2em;color:var(--brand);margin:14px 0 6px;font-variant-numeric:tabular-nums}
.bind-overlay .bl{font-size:13px;color:var(--ink3);line-height:1.75}
.bind-overlay .bk{margin-top:18px;font-size:12px;color:var(--ink3);max-width:240px;line-height:1.7}
.bind-overlay .spin{margin-top:14px;font-size:12.5px;color:var(--brand);font-weight:600}

/* 键盘输入覆盖层 */
.kb-overlay{position:absolute;inset:0;background:rgba(20,17,16,.5);z-index:46;display:none;align-items:flex-end;justify-content:center}
.kb-overlay.show{display:flex;animation:fi .25s ease}
.kb-card{width:100%;background:#fff;border-radius:22px 22px 0 0;padding:18px 18px 22px}
.kb-card .kh{font-size:15px;font-weight:700;color:#26262B;margin-bottom:10px}
.kb-card textarea{width:100%;height:88px;border:1.5px solid #E6E6EA;border-radius:14px;padding:12px;
  font-size:15px;font-family:inherit;resize:none;outline:none;line-height:1.5}
.kb-card textarea:focus{border-color:var(--brand)}
.kb-row{display:flex;gap:10px;margin-top:12px}
.kb-row button{flex:1;border:0;border-radius:13px;padding:13px;font-size:15px;font-weight:700;font-family:inherit;cursor:pointer}
.kb-row .send{background:var(--brand);color:#fff}
.kb-row .cancel{background:#F2F2F4;color:#6B6B72}

/* ================= 子女端 ================= */
.fam-screen{height:100%;display:flex;flex-direction:column;background:#FAFAFB;padding-top:46px}
.fs-head{
  flex:0 0 auto;padding:10px 20px 14px;background:#fff;border-bottom:1px solid #F0F0F2;
  display:flex;align-items:center;gap:12px;
}
.fs-back{
  width:32px;height:32px;border-radius:10px;border:0;background:#F4F4F6;color:#6B6B72;
  display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:15px;flex:0 0 auto;
}
.fs-title{font-size:16px;font-weight:700;color:#26262B}
.fs-sub{font-size:11.5px;color:#9A9AA2;margin-top:2px}
.fs-body{flex:1 1 auto;overflow-y:auto;padding:18px 20px 24px}
.fs-body::-webkit-scrollbar{width:0}
.fs-foot{flex:0 0 auto;padding:12px 20px 20px;background:#fff;border-top:1px solid #F0F0F2}

.btn{
  width:100%;border:0;border-radius:14px;padding:14px;font-size:15px;font-weight:700;
  font-family:inherit;cursor:pointer;background:var(--brand);color:#fff;
  box-shadow:0 10px 22px -12px rgba(221,92,52,.85);transition:.18s;
}
.btn:disabled{background:#E8E8EC;color:#B4B4BC;box-shadow:none;cursor:not-allowed}
.btn.ghost{background:#fff;color:#4A4A52;border:1.5px solid #E6E6EA;box-shadow:none}
.btn.sm{padding:11px;font-size:14px}

.hd{font-size:19px;font-weight:800;color:#26262B;line-height:1.45;margin:4px 0 8px}
.hd-sub{font-size:13.5px;color:#8A8A93;line-height:1.7;margin-bottom:20px}

.rec-card{background:#fff;border-radius:16px;padding:14px 16px;margin-bottom:12px;border:1.5px solid #EFEFF2;display:flex;align-items:center;gap:13px}
.rec-card.done{border-color:#CDE7DA;background:#F8FDFA}
.rec-idx{width:26px;height:26px;border-radius:9px;background:#F4F4F7;color:#8A8A93;font-size:12.5px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.rec-card.done .rec-idx{background:#E2F1E9;color:var(--ok)}
.rec-txt{flex:1 1 auto;font-size:14px;color:#3A3A42;line-height:1.55}
.rec-meta{font-size:11px;color:#A8A8B0;margin-top:4px}
.rec-btn{
  width:44px;height:44px;border-radius:50%;border:0;flex:0 0 auto;cursor:pointer;
  background:var(--brand);color:#fff;font-size:16px;transition:.18s;
  display:flex;align-items:center;justify-content:center;
}
.rec-btn.recording{background:#E23D2E;animation:pulse 1.1s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(226,61,46,.45)}50%{box-shadow:0 0 0 12px rgba(226,61,46,0)}}
.rec-card.done .rec-btn{background:#EAF5EF;color:var(--ok);font-size:15px}

.prog{height:6px;border-radius:3px;background:#EFEFF2;overflow:hidden;margin:14px 0 6px}
.prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,#E8714A,#D14E27);border-radius:3px;transition:.5s}
.prog-lb{font-size:11.5px;color:#9A9AA2;text-align:center}

.q-block{margin-bottom:22px}
.q-t{font-size:14.5px;font-weight:700;color:#33333A;margin-bottom:10px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  border:1.5px solid #E6E6EA;background:#fff;color:#6B6B72;border-radius:11px;
  padding:9px 15px;font-size:13.5px;font-family:inherit;cursor:pointer;transition:.16s;font-weight:500;
}
.chip.on{background:var(--brand-soft);border-color:var(--brand);color:var(--brand-d);font-weight:700}

/* 家属编辑卡片（可增删，每人一张） */
.member-card{background:#fff;border:1.5px solid #EFEFF2;border-radius:16px;padding:12px 14px 4px;margin-bottom:12px}
.member-card:last-of-type{margin-bottom:8px}
.member-hd{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}
.member-no{font-size:12px;font-weight:700;color:#9A9AA2;letter-spacing:.04em}
.member-card .field{margin-bottom:10px}
.member-card .chip{padding:5px 12px;font-size:12.5px;border-radius:9px}

.field{margin-bottom:14px}
.field label{display:block;font-size:12.5px;color:#8A8A93;margin-bottom:6px;font-weight:600}
.field input,.field select{
  width:100%;border:1.5px solid #E6E6EA;border-radius:12px;padding:12px 13px;
  font-size:14.5px;font-family:inherit;color:#26262B;background:#fff;outline:none;transition:.16s;
}
.field input:focus,.field select:focus{border-color:var(--brand);box-shadow:0 0 0 3.5px rgba(221,92,52,.1)}
.field.row{display:flex;gap:10px}
.field.row>div{flex:1}

.card{background:#fff;border-radius:16px;padding:16px;border:1.5px solid #EFEFF2;margin-bottom:12px}
.kv{display:flex;justify-content:space-between;font-size:13.5px;padding:9px 0;border-bottom:1px dashed #F0F0F2}
.kv:last-child{border:0;padding-bottom:0}
.kv .k{color:#9A9AA2}
.kv .v{color:#26262B;font-weight:600;text-align:right;max-width:62%}

.done-hero{text-align:center;padding:12px 0 20px}
.done-hero .ico{
  width:66px;height:66px;border-radius:50%;background:linear-gradient(150deg,#5FBF8E,#37996A);
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:31px;margin:0 auto 14px;
  box-shadow:0 14px 30px -14px rgba(55,153,106,.9);
}

.list-item{
  display:flex;align-items:center;gap:12px;background:#fff;padding:15px 16px;
  border-bottom:1px solid #F4F4F6;cursor:pointer;
}
.list-item:first-child{border-radius:16px 16px 0 0}
.list-item:last-child{border-radius:0 0 16px 16px;border-bottom:0}
.list-item .li{width:34px;height:34px;border-radius:10px;background:#FDF1EB;display:flex;align-items:center;justify-content:center;font-size:16px;flex:0 0 auto}
.list-item .lt{flex:1 1 auto}
.list-item .lt b{display:block;font-size:14.5px;color:#26262B;font-weight:600}
.list-item .lt span{font-size:11.5px;color:#9A9AA2}
.list-item .ar{color:#C8C8D0;font-size:14px}

.hint-bar{
  background:#FDF6EC;border:1px solid #F3E2C8;border-radius:12px;padding:11px 13px;
  font-size:12.5px;color:#8A6A46;line-height:1.6;margin-bottom:16px;
}

.foot{
  flex:0 0 auto;margin-top:10px;font-size:10.5px;color:#B9A99A;letter-spacing:.06em;text-align:center;
}

@media (max-width:430px){
  body{padding:10px 8px 6px}
  .topbar{margin-bottom:10px}
  .brand .sub{display:none}
  .seg button{padding:8px 14px;font-size:12.5px}
  .phone{width:min(392px,96vw,calc((100dvh - 96px) * 0.49));border-radius:40px;padding:8px}
  .screen{border-radius:33px}
  .foot{display:none}
}