/* 本户对话页：手机优先，一列 = 顶栏 / 对话 / 输入区；配色与原始版对话页同一套 */
:root { --bg:#05070d; --panel:rgba(14,19,34,.78); --line:rgba(140,160,220,.16); --text:#e8ecf5; --muted:#9aa3b8; --dim:#6b7489;
  --cyan:#38e1ff; --violet:#8b7bff; --pink:#ff5fa2; --bad:#ff5c70; --warn:#ffc24b;
  --grad:linear-gradient(120deg,var(--cyan),var(--violet) 55%,var(--pink)); --num:"DIN Alternate","Roboto Mono",ui-monospace,monospace;
  --st:env(safe-area-inset-top,0px); --sb:env(safe-area-inset-bottom,0px); }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
[hidden] { display:none !important; }
html, body { height:100%; }
body { margin:0; height:100dvh; background:var(--bg); color:var(--text); font:15px/1.65 "PingFang SC","HarmonyOS Sans SC","Microsoft YaHei",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased; overflow:hidden; overscroll-behavior:none; -webkit-text-size-adjust:100%; }
button, textarea { font:inherit; color:inherit; }
.bgfx { position:fixed; inset:-20%; z-index:0; pointer-events:none; filter:blur(90px); opacity:.4; }
.bgfx i { position:absolute; width:60vmax; height:60vmax; border-radius:50%; }
.bgfx i:nth-child(1) { background:radial-gradient(circle,rgba(56,225,255,.42),transparent 65%); left:-10%; top:-10%; }
.bgfx i:nth-child(2) { background:radial-gradient(circle,rgba(139,123,255,.48),transparent 65%); right:-15%; top:25%; }
.bgfx i:nth-child(3) { background:radial-gradient(circle,rgba(255,95,162,.26),transparent 65%); left:20%; bottom:-20%; }
.btn { border:0; border-radius:14px; color:#fff; font-weight:600; cursor:pointer; background:var(--grad); touch-action:manipulation; }
.btn:active { transform:scale(.97); } .btn:disabled { opacity:.45; }

/* ---------- 认设备 ---------- */
.gate { position:relative; z-index:1; height:100%; display:grid; place-items:center; padding:calc(20px + var(--st)) 20px calc(20px + var(--sb)); }
.card { width:min(400px,100%); padding:34px 24px 28px; text-align:center; background:var(--panel); border:1px solid var(--line); border-radius:24px;
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }
.logo { width:64px; height:64px; border-radius:18px; }
.card h1 { margin:10px 0 4px; font-size:22px; letter-spacing:.12em; }
.sub { margin:0; color:var(--muted); font-size:14.5px; }
.fp { margin:22px 0 4px; padding:14px 12px; border-radius:16px; border:1px solid var(--line); background:rgba(5,7,13,.55); }
.fp span { display:block; color:var(--dim); font-size:12.5px; }
.fp b { display:block; margin-top:4px; font:600 21px/1.3 var(--num); letter-spacing:.14em; color:var(--cyan); word-break:break-all; }
.hint { margin:14px 2px 0; color:var(--dim); font-size:13px; text-align:left; }
.card .btn { width:100%; height:48px; margin-top:18px; font-size:16px; }

/* ---------- 对话 ---------- */
.app { position:relative; z-index:1; height:100%; display:grid; grid-template-rows:auto auto minmax(0,1fr) auto; }
.head { display:flex; align-items:center; gap:10px; min-height:56px; padding:calc(8px + var(--st)) 14px 8px; border-bottom:1px solid var(--line);
  background:rgba(5,7,13,.72); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }
.hlogo { width:34px; height:34px; border-radius:10px; }
.htitle { display:flex; flex-direction:column; min-width:0; }
.htitle b { font-size:16px; } .htitle small { color:var(--dim); font-size:12px; }
/* 顶栏下：主人锚更换在等（可拒绝）、安装包指纹（服务钥签过，SB-APK-4） */
.bar { display:flex; flex-direction:column; gap:8px; padding:0 12px; background:rgba(5,7,13,.72); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }
.bar:has(> :not([hidden])) { padding-top:10px; padding-bottom:10px; border-bottom:1px solid var(--line); }
.pend { padding:12px 14px; border-radius:16px; border:1px solid rgba(255,194,75,.45); background:rgba(255,194,75,.1); }
.pend p { margin:0 0 10px; font-size:14px; color:var(--text); }
.pend .no { width:100%; height:44px; background:linear-gradient(120deg,#ff5c70,#ff8a5c); }
/* 设备：在等放行的新设备（老设备可放行）、挂起中的设备（可移除） */
#devs { display:contents; }
.pend.dev { border-color:rgba(56,225,255,.4); background:rgba(56,225,255,.08); }
.pend .acts { display:flex; gap:8px; } .pend .acts .btn { flex:1; height:44px; width:auto; }
.pend small { display:block; margin:-4px 0 10px; color:var(--dim); font-size:12.5px; }
/* 认设备时显示的 4 位数字（主人在办公室核对） */
.code { margin:22px 0 4px; padding:16px 12px; border-radius:18px; border:1px solid rgba(56,225,255,.45); background:rgba(56,225,255,.08); }
.code span { display:block; color:var(--muted); font-size:13px; }
.code b { display:block; margin-top:2px; font:700 46px/1.15 var(--num); letter-spacing:.32em; padding-left:.32em; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }
.about { font-size:12.5px; color:var(--dim); }
.about summary { cursor:pointer; list-style:none; } .about summary::-webkit-details-marker { display:none; }
.about summary::before { content:"▸ "; } .about[open] summary::before { content:"▾ "; }
.about p { margin:6px 0 0; font:12px/1.6 var(--num); word-break:break-all; color:var(--muted); white-space:pre-wrap; }
.list { overflow-y:auto; padding:14px 12px 8px; display:flex; flex-direction:column; gap:10px; -webkit-overflow-scrolling:touch; }
.empty { margin:auto; color:var(--dim); font-size:14px; text-align:center; }
.msg { max-width:min(82%,640px); padding:9px 13px; border-radius:18px; white-space:pre-wrap; word-break:break-word; }
.msg.xiaoyun { align-self:flex-start; background:var(--panel); border:1px solid var(--line); border-top-left-radius:6px; }
.msg.you { align-self:flex-end; background:linear-gradient(135deg,rgba(56,225,255,.22),rgba(139,123,255,.3)); border:1px solid rgba(139,123,255,.35); border-top-right-radius:6px; }
.msg time { display:block; margin-top:3px; font:11.5px var(--num); color:var(--dim); text-align:right; }
.compose { display:flex; align-items:flex-end; gap:8px; padding:8px 10px calc(8px + var(--sb)); border-top:1px solid var(--line); background:rgba(5,7,13,.78); }
.compose textarea { flex:1; min-height:44px; max-height:40vh; padding:10px 13px; border-radius:16px; border:1px solid var(--line); background:rgba(14,19,34,.9);
  resize:none; outline:none; font-size:16px; line-height:1.45; }
.compose textarea:focus { border-color:rgba(139,123,255,.6); }
.send { flex:none; height:44px; padding:0 18px; }
.err { align-self:center; color:var(--bad); font-size:13px; }
@media (min-width:900px) { .list { padding:20px max(24px, calc(50% - 420px)); } .bar { padding-left:max(24px, calc(50% - 420px)); padding-right:max(24px, calc(50% - 420px)); } .compose { padding-left:max(10px, calc(50% - 430px)); padding-right:max(10px, calc(50% - 430px)); } }