/* Author: UX-Designer */
/* V-04 极简名片流 · 共享组件样式（只引 tokens.css 的 var，禁字面色值/字号） */
*{margin:0;padding:0;box-sizing:border-box}
body{background:var(--page);font-family:-apple-system,"PingFang SC","Helvetica Neue",sans-serif;
  display:flex;flex-direction:column;align-items:center;gap:14px;padding:34px 0 60px;color:var(--fg)}
.variant-tag{font-size:var(--fs-tag);letter-spacing:.18em;color:var(--muted);font-weight:600}
.variant-tag b{color:var(--accent)}
a{color:inherit;text-decoration:none}

/* 手机框（iPhone 390） */
.phone{width:390px;height:auto;min-height:844px;background:var(--bg);border-radius:46px;
  box-shadow:0 22px 60px rgba(22,22,26,.22),0 0 0 10px var(--fg);
  overflow:hidden;display:flex;flex-direction:column;position:relative}
.statusbar{height:52px;flex:none;display:flex;align-items:flex-end;justify-content:space-between;
  padding:0 30px 6px;font-size:var(--fs-btn);font-weight:600}
.homebar{position:absolute;bottom:7px;left:50%;transform:translateX(-50%);
  width:134px;height:5px;border-radius:3px;background:var(--fg)}

/* Mac 窗口框（S-04/S-05 用） */
.macwin{width:860px;background:var(--bg);border-radius:12px;overflow:hidden;
  box-shadow:0 22px 60px rgba(22,22,26,.28);border:1px solid var(--border)}
.mactitle{display:flex;align-items:center;gap:8px;padding:10px 14px;background:var(--surface);
  border-bottom:1px solid var(--border)}
.mactitle .dots{display:flex;gap:7px}
.mactitle .dots i{width:12px;height:12px;border-radius:99px;display:block}
.mactitle .dots i:nth-child(1){background:var(--error)}
.mactitle .dots i:nth-child(2){background:var(--warning)}
.mactitle .dots i:nth-child(3){background:var(--success)}
.mactitle b{font-size:var(--fs-card-title);flex:1;text-align:center;font-weight:600}

/* 导航 */
.nav{flex:none;background:var(--bg);padding:8px 16px 10px;display:flex;align-items:center;gap:10px;
  border-bottom:1px solid var(--border)}
.nav .back{color:var(--accent);font-size:var(--fs-back);line-height:1;padding:4px 2px;flex:none}
.nav h1{font-size:var(--fs-nav-title);font-weight:600;flex:1}
.nav .action{color:var(--accent);font-size:var(--fs-card-title);font-weight:600;flex:none}
.nav .more{color:var(--muted);font-size:var(--fs-back);letter-spacing:1px;padding:4px 6px;flex:none}
.nav .sp{flex:1}

/* 名册顶栏（S-01）：无标题，左=用户头像→S-11，右=搜索/新建圆钮 */
.nav.home{padding:4px 14px 12px;gap:11px;border-bottom:none}
/* 会话顶栏（S-02）：悬浮胶囊组，右钮=接管入口常驻（F4.2） */
.nav.chat{padding:6px 12px 10px;gap:9px;border-bottom:none;flex-wrap:wrap}
/* 会话屏的 bot 级子屏入口（例程/记忆/规则）。做成小号文字胶囊而不是再加三个
   圆钮：圆钮在 44px 一组的顶栏里放不下四个，横向挤压会先牺牲 bot 名片。 */
.nav.chat .subnav{color:var(--accent);font-size:var(--fs-btn);font-weight:600;flex:none;
  padding:5px 10px;border-radius:99px;background:var(--surface)}

/* 子屏顶栏（S-06..S-10）：返回 + 标题。壳由 app.js 统一套，见那里的说明。 */
.nav.sub{padding:6px 12px 10px;gap:9px}
.nav.sub .subtitle{font-size:var(--fs-nav-title);font-weight:600}
.subbody{flex:1;min-height:0;overflow-y:auto}
.pill{display:flex;align-items:center;gap:9px;background:var(--surface);border-radius:99px;
  padding:5px 16px 5px 6px;box-shadow:0 1px 5px rgba(22,22,26,.09);min-width:0}
.pill b{font-size:var(--fs-nav-title);font-weight:600;white-space:nowrap}

/* GIF 头像形象 + 状态点
   占位形态 = identity 色实心几何体 + 两只白眼（DESIGN.md §4「bot 头像几何体」）。
   几何体轮廓本身是识别线索，故不套统一圆角框、不裁切。 */
.av{display:inline-flex;position:relative;flex:none}
.av,.av .gifface{width:44px;height:44px}
.av.sm,.av.sm .gifface{width:34px;height:34px}
.av .gifface{display:block}
.av .st{position:absolute;right:0;bottom:0;width:12px;height:12px;border-radius:99px;
  border:2.5px solid var(--bg);z-index:2}
.av.capsule .st{bottom:4px}
@keyframes blinkface{0%,90%,100%{transform:scaleY(1)}94%{transform:scaleY(.08)}}
.gifface .eye{animation:blinkface 3.2s infinite;transform-origin:center}
.gifface.p2 .eye{animation-delay:1.1s}
.gifface.p3 .eye{animation-delay:2.05s}

/* identity 色（只给头像形象上色，禁表意——状态永远走状态色） */
.av.iris .gifface{color:var(--id-iris)}
.av.amber .gifface{color:var(--id-amber)}
.av.teal .gifface{color:var(--id-teal)}
.av.rose .gifface{color:var(--id-rose)}
.av.clay .gifface{color:var(--id-clay)}
.av.moss .gifface{color:var(--id-moss)}
.av.slate .gifface{color:var(--id-slate)}
.av.plum .gifface{color:var(--id-plum)}

/* 用户本人头像（非 bot，不吃 identity 色） */
.me{width:44px;height:44px;border-radius:99px;overflow:hidden;flex:none;display:block;
  background:var(--border)}
.me svg{width:100%;height:100%;display:block;color:var(--muted)}

/* 圆钮（顶栏用，热区 44×44 满足 HIG） */
.rbtn{width:44px;height:44px;border-radius:99px;background:var(--surface);flex:none;
  box-shadow:0 1px 5px rgba(22,22,26,.09);display:flex;align-items:center;justify-content:center}
.rbtn svg{width:21px;height:21px;display:block;color:var(--fg)}

/* 列表页容器 */
.list{flex:1;padding:12px 16px;display:flex;flex-direction:column;gap:10px;background:var(--page)}
.rowcard{background:var(--surface);border-radius:var(--radius-card);border:.5px solid var(--border);
  box-shadow:0 1px 3px rgba(0,0,0,.04);padding:13px 14px;display:flex;gap:11px;align-items:flex-start}
.rowcard .tt{flex:1;min-width:0}
.rowcard .tt b{font-size:var(--fs-list-title);color:var(--fg);display:block;line-height:1.35}
.rowcard .tt small{font-size:var(--fs-meta);color:var(--muted);display:block;margin-top:2px;line-height:1.45}
.rowcard .side{font-size:var(--fs-ts);color:var(--muted);flex:none;text-align:right}
.sechead{font-size:var(--fs-kicker);letter-spacing:.18em;font-weight:700;color:var(--muted);
  text-transform:uppercase;margin:8px 2px 0}

/* bot 名册（S-01 专用）：无卡片、无描边、无分隔线，行距即分组
   设置类列表（skill/routine/记忆/规则）仍走上面的 .rowcard，两者不拉齐 */
.botlist{flex:1;display:flex;flex-direction:column;background:var(--bg);padding:2px 0 0}
.botrow{display:flex;gap:13px;align-items:center;padding:13px 18px}
.botrow .tt{flex:1;min-width:0}
.botrow .tt b{font-size:var(--fs-nav-title);font-weight:600;color:var(--fg);display:block;line-height:1.3}
.botrow .tt .stat{font-size:var(--fs-meta);color:var(--muted);display:block;margin-top:2px;line-height:1.4}
.botrow .tt .prev{font-size:var(--fs-card-body);color:var(--fg-body);display:block;margin-top:3px;
  line-height:1.4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.botrow .side{font-size:var(--fs-meta);color:var(--muted);flex:none;align-self:flex-start;margin-top:3px}
/* 名册里的断连条跟着去卡片化——无卡片列表里再放一张卡片会变成视觉异物 */
.botlist .banner{margin:0 18px;padding:5px 0;background:none;border:none;color:var(--muted)}
.newbotrow{display:flex;align-items:center;gap:13px;padding:14px 18px;
  font-size:var(--fs-nav-title);font-weight:600;color:var(--accent)}
.newbotrow .plus{width:44px;height:44px;border-radius:99px;border:1.5px dashed var(--border);
  display:flex;align-items:center;justify-content:center;flex:none;font-size:var(--fs-back);
  color:var(--accent);line-height:1}

/* 事项 icon（SF Symbols 占位） */
.icn{width:22px;height:22px;flex:none;display:flex;align-items:center;justify-content:center;margin-top:1px}
.icn svg{width:19px;height:19px;display:block}
.icn.approve{color:var(--accent)}
.icn.stuck{color:var(--warning)}
.icn.artifact{color:var(--success)}

/* 钮 */
.btnrow{display:flex;gap:8px;margin-top:11px}
.ibtn{flex:1;text-align:center;font-size:var(--fs-btn);font-weight:600;padding:8px 0;
  border-radius:var(--radius-btn);cursor:pointer}
.ibtn.fill{background:var(--accent);color:var(--surface)}
.ibtn.fill.w{background:var(--warning)}
.ibtn.line{border:1px solid var(--border);color:var(--fg);background:var(--surface)}
.ibtn.text{color:var(--muted);font-weight:500;flex:.8}
.ibtn.danger{color:var(--error);border:1px solid var(--border);background:var(--surface)}

/* 开关 */
.switch{width:46px;height:28px;border-radius:99px;background:var(--success);position:relative;flex:none}
.switch.off{background:var(--border)}
.switch i{position:absolute;top:2px;width:24px;height:24px;border-radius:99px;background:var(--surface);
  box-shadow:0 1px 3px rgba(0,0,0,.2)}
.switch i{right:2px}
.switch.off i{left:2px;right:auto}

/* 表单 */
.form{flex:1;padding:14px 16px;display:flex;flex-direction:column;gap:14px;background:var(--page)}
.fgroup{background:var(--surface);border-radius:var(--radius-card);border:.5px solid var(--border);overflow:hidden}
.frow{display:flex;align-items:center;gap:10px;padding:12px 14px;border-top:.5px solid var(--border)}
.frow:first-child{border-top:none}
.frow label{font-size:var(--fs-list-title);color:var(--fg);flex:none;min-width:74px}
.frow .val{flex:1;font-size:var(--fs-list-title);color:var(--fg-body)}
.frow .val.ph{color:var(--muted)}
.frow .chev{color:var(--muted);font-size:var(--fs-card-title);flex:none}
.fnote{font-size:var(--fs-meta);color:var(--muted);padding:0 6px;line-height:1.5}
.fnote.err{color:var(--error)}

/* 提示条 */
.banner{display:flex;align-items:center;gap:8px;background:var(--surface);border:.5px solid var(--border);
  border-radius:12px;padding:9px 12px;font-size:var(--fs-meta);color:var(--fg-body)}
.banner .bdot{width:7px;height:7px;border-radius:99px;flex:none}

/* mock 诚实标注 */
.mocknote{font-size:var(--fs-ts);color:var(--muted);text-align:center;padding:6px 14px}