/* HKFai · 组件（DESIGN.md 第 8 节） */

/* ---------- 顶栏 ---------- */
.topbar{
  position:sticky;top:0;z-index:40;
  backdrop-filter:blur(14px);background:rgba(10,12,17,.72);
  border-bottom:var(--hair);
}
.topbar-in{height:64px;display:flex;align-items:center;gap:28px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-size:19px;letter-spacing:.02em}
.brand-mark{
  width:28px;height:28px;border-radius:8px;position:relative;flex:0 0 auto;
  background:linear-gradient(160deg,#1D2331,#0F131C);
  border:1px solid rgba(228,193,119,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.brand-mark::before{
  content:"";position:absolute;left:3px;top:2px;width:16px;height:22px;
  background:linear-gradient(190deg,rgba(242,220,164,.85),rgba(242,220,164,0) 78%);
  clip-path:polygon(0 0,100% 12%,72% 100%,18% 86%);
}
.brand-mark::after{content:"";position:absolute;right:4px;bottom:4px;width:4px;height:4px;border-radius:1px;background:var(--vermilion-500)}
.brand .b-hk{color:var(--text-1)}
.brand .b-f{color:var(--gold-400)}
.brand .b-ai{color:var(--text-3);font-size:16px;margin-left:1px}
.nav{display:flex;gap:22px;font-size:14px;color:var(--text-2)}
.nav a{display:flex;align-items:center;height:64px;position:relative;transition:color var(--t-hover) var(--e-out)}
.nav a:hover,.nav a.on{color:var(--text-1)}
.nav a.on::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,transparent,var(--gold-400),transparent)}

/* ---------- 按钮 ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 18px;
  border-radius:var(--r-sm);font-size:15px;font-weight:600;letter-spacing:.01em;white-space:nowrap;
  transition:transform var(--t-hover) var(--e-out),background var(--t-hover) var(--e-out),border-color var(--t-hover) var(--e-out),box-shadow var(--t-hover) var(--e-out)}
.btn:active{transform:translateY(1px)}
.btn-sm{height:32px;padding:0 12px;font-size:13px;border-radius:var(--r-xs)}
.btn-lg{height:48px;padding:0 26px;font-size:16px}
.btn-primary{background:linear-gradient(180deg,var(--gold-300),var(--gold-500));color:#17130A;box-shadow:var(--shadow-gold)}
.btn-primary:hover{box-shadow:0 14px 36px rgba(201,162,77,.3)}
.btn-primary:active{box-shadow:var(--shadow-1)}
.btn-ghost{border:var(--hair-strong);color:var(--text-1);background:rgba(237,233,224,.02)}
.btn-ghost:hover{border-color:rgba(228,193,119,.4);background:rgba(228,193,119,.06)}
.btn-quiet{color:var(--text-2);padding:0 10px;height:34px;font-weight:500}
.btn-quiet:hover{color:var(--text-1);background:rgba(237,233,224,.04)}
.btn-danger{border:1px solid rgba(206,74,51,.45);color:var(--vermilion-400);background:rgba(206,74,51,.06)}
.btn-danger:hover{background:rgba(206,74,51,.14)}
.btn-icon{width:36px;height:36px;padding:0;border:var(--hair);border-radius:var(--r-sm);color:var(--text-2);display:inline-flex;align-items:center;justify-content:center;transition:all var(--t-hover) var(--e-out)}
.btn-icon:hover{color:var(--text-1);border-color:rgba(228,193,119,.34)}
.btn[disabled],.btn-icon[disabled]{opacity:.45;cursor:not-allowed;transform:none}

/* ---------- 胶囊 / 标签 ---------- */
.pill{display:inline-flex;align-items:center;gap:7px;height:24px;padding:0 10px;border-radius:var(--r-pill);
  background:rgba(237,233,224,.05);border:var(--hair);font-size:12px;font-weight:500;letter-spacing:.06em;color:var(--text-2)}
.pill i{width:6px;height:6px;border-radius:50%;background:currentColor;display:block}
.pill-ok{color:var(--jade-400);border-color:rgba(87,168,143,.32);background:rgba(87,168,143,.08)}
.pill-run{color:var(--gold-400);border-color:rgba(228,193,119,.32);background:rgba(228,193,119,.08)}
.pill-run i{animation:pulse 1.6s ease-in-out infinite}
.pill-bad{color:var(--vermilion-400);border-color:rgba(206,74,51,.36);background:rgba(206,74,51,.08)}
.pill-ai{color:var(--iris-400);border-color:rgba(142,128,242,.32);background:rgba(142,128,242,.08)}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}
.chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:var(--r-pill);
  border:var(--hair);background:rgba(237,233,224,.03);font-size:13px;color:var(--text-2);
  transition:all var(--t-hover) var(--e-out)}
.chip:hover{color:var(--text-1);border-color:rgba(228,193,119,.34);background:rgba(228,193,119,.06)}
.chip-on{color:#17130A;background:linear-gradient(180deg,var(--gold-300),var(--gold-500));border-color:transparent;font-weight:600}
.chip-x{color:var(--text-3);font-size:13px;line-height:1}
.chip-x:hover{color:var(--vermilion-400)}

/* ---------- 卡片 ---------- */
.panel{background:var(--ink-800);border:var(--hair);border-radius:var(--r-lg);padding:24px}
.panel-tight{padding:16px}
.panel-hover{transition:transform var(--t-hover) var(--e-out),border-color var(--t-hover) var(--e-out)}
.panel-hover:hover{transform:translateY(-2px);border-color:rgba(228,193,119,.22)}
.paper{
  position:relative;background:linear-gradient(180deg,var(--paper-50),var(--paper-100));
  border:var(--hair-paper);border-radius:var(--r-lg);padding:20px 22px;color:var(--paper-text-1);
  box-shadow:var(--shadow-2),inset 0 1px 0 rgba(255,255,255,.6);
}
.paper h3{color:var(--paper-text-1)}
.paper .muted{color:var(--paper-text-2)}
.paper .dim{color:var(--paper-text-3)}
/* 纸面上的次要按钮必须换成纸上文字色，否则浅底浅字 */
.paper .btn-ghost{color:var(--paper-text-1);border-color:var(--paper-line);background:rgba(25,23,19,.02)}
.paper .btn-ghost:hover{border-color:var(--gold-600);background:rgba(201,162,77,.14)}
.paper .btn-quiet{color:var(--paper-text-2)}
.paper .btn-quiet:hover{color:var(--paper-text-1);background:rgba(25,23,19,.06)}
.paper .pill{color:var(--paper-text-2);border-color:var(--paper-line);background:rgba(25,23,19,.04)}
.paper .pill-ok{color:#276A58;border-color:rgba(39,106,88,.35);background:rgba(39,106,88,.1)}
.paper .pill-run{color:#8A6A1F;border-color:rgba(138,106,31,.35);background:rgba(201,162,77,.16)}
.paper .pill-bad{color:#8F3221;border-color:rgba(143,50,33,.35);background:rgba(206,74,51,.12)}
.seal{width:8px;height:8px;background:var(--vermilion-500);border-radius:1px;display:block}
.hairline{height:1px;background:linear-gradient(90deg,transparent,rgba(237,233,224,.14),transparent)}
.kicker{font-family:var(--font-mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--text-3)}

/* ---------- 输入 ---------- */
.field{width:100%;background:var(--ink-800);border:var(--hair-strong);border-radius:var(--r-sm);
  padding:10px 12px;color:var(--text-1);font-size:15px;line-height:1.6;
  transition:border-color var(--t-hover) var(--e-out),box-shadow var(--t-hover) var(--e-out)}
.field::placeholder{color:var(--text-3)}
.field:hover{border-color:rgba(237,233,224,.22)}
.field:focus{outline:none;border-color:var(--gold-400);box-shadow:0 0 0 3px rgba(228,193,119,.18)}
textarea.field{resize:none;min-height:88px;font-family:var(--font-sans)}
.switch{position:relative;width:44px;height:24px;border-radius:99px;background:var(--ink-600);border:var(--hair);flex:0 0 auto;transition:background var(--t-hover) var(--e-out)}
.switch::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--text-2);transition:all var(--t-hover) var(--e-out)}
.switch.on{background:linear-gradient(180deg,var(--gold-400),var(--gold-500))}
.switch.on::after{left:22px;background:#17130A}

/* ---------- 头像 ---------- */
.avatar{width:40px;height:40px;border-radius:50%;flex:0 0 auto;position:relative;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:17px;color:var(--text-1);
  background:linear-gradient(160deg,#28313F,#161B26);border:1px solid rgba(237,233,224,.12)}
.avatar-lg{width:64px;height:64px;font-size:24px}
.avatar.speaking{border-color:rgba(228,193,119,.75);box-shadow:0 0 0 4px rgba(228,193,119,.14)}
.avatar-0{background:linear-gradient(160deg,#2A3243,#171C27)}
.avatar-1{background:linear-gradient(160deg,#3A2E2A,#1E1A18)}
.avatar-2{background:linear-gradient(160deg,#26362F,#151F1B)}
.avatar-3{background:linear-gradient(160deg,#33304A,#1A1826)}
.dot-on{width:7px;height:7px;border-radius:50%;background:var(--jade-500);box-shadow:0 0 0 3px rgba(87,168,143,.16)}

/* ---------- 消息流（DESIGN.md 8.4） ---------- */
.stream{display:flex;flex-direction:column;gap:20px;padding:28px 0 12px}
.msg{display:flex;gap:12px;max-width:100%;animation:enter var(--t-enter) var(--e-out) both}
.msg-body{min-width:0;max-width:78%}
.msg-head{display:flex;align-items:baseline;gap:8px;margin-bottom:6px}
.msg-name{font-size:14px;font-weight:600;color:var(--text-1)}
.msg-time{font-family:var(--font-mono);font-size:12px;color:var(--text-3)}
.bubble{background:var(--ink-700);border:var(--hair);border-left:2px solid rgba(228,193,119,.55);
  border-radius:4px var(--r-md) var(--r-md) var(--r-md);padding:12px 16px;
  font-family:var(--font-display);font-size:17px;line-height:1.9;color:var(--text-1);
  white-space:pre-wrap;word-break:break-word;box-shadow:var(--shadow-1)}
.msg.me{flex-direction:row-reverse}
.msg.me .msg-body{max-width:74%}
.msg.me .msg-head{justify-content:flex-end}
.msg.me .bubble{background:linear-gradient(180deg,var(--paper-50),var(--paper-100));color:var(--paper-text-1);
  border-color:var(--paper-line);border-left:var(--hair-paper);border-right:2px solid rgba(206,74,51,.65);
  border-radius:var(--r-md) 4px var(--r-md) var(--r-md);box-shadow:var(--shadow-2),inset 0 1px 0 rgba(255,255,255,.6)}
.msg.stack-tight{margin-top:-12px}
.msg.stack-tight .avatar,.msg.stack-tight .msg-head{visibility:hidden;height:0;margin:0;overflow:hidden}
.narration{display:flex;align-items:center;gap:14px;margin:6px auto;max-width:62ch;padding:0 8px}
.narration::before,.narration::after{content:"";height:1px;flex:1;background:linear-gradient(90deg,transparent,rgba(228,193,119,.5))}
.narration::after{background:linear-gradient(270deg,transparent,rgba(228,193,119,.5))}
.narration p{font-family:var(--font-display);font-size:17px;line-height:1.9;color:var(--text-2);
  text-align:center;text-indent:2em;font-style:normal}
.sysnote{align-self:center;font-size:12px;letter-spacing:.06em;color:var(--text-3);
  background:var(--ink-600);border:var(--hair);border-radius:var(--r-pill);padding:4px 12px}
.caret{display:inline-block;width:8px;color:var(--gold-400);animation:blink 1s step-start infinite}
@keyframes blink{50%{opacity:0}}
.typing{display:inline-flex;gap:5px;align-items:center;padding:14px 16px}
.typing span{width:6px;height:6px;border-radius:50%;background:var(--gold-400);animation:bounce 1.2s infinite}
.typing span:nth-child(2){animation-delay:.15s}
.typing span:nth-child(3){animation-delay:.3s}
@keyframes bounce{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-4px);opacity:1}}

/* ---------- 进度 / 分段条 ---------- */
.segbar{display:flex;gap:6px;align-items:center}
.segbar .seg{flex:1;height:6px;border-radius:99px;background:var(--ink-600);overflow:hidden;position:relative}
.segbar .seg.done{background:linear-gradient(90deg,var(--gold-500),var(--gold-300))}
.segbar .seg.now::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(242,220,164,.9),transparent);
  animation:shimmer 1.4s linear infinite}
.segbar .seg.now{background:rgba(228,193,119,.22)}
@keyframes shimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
.meter{height:8px;border-radius:99px;background:var(--ink-600);overflow:hidden}
.meter>i{display:block;height:100%;background:linear-gradient(90deg,var(--gold-500),var(--gold-300));border-radius:99px;transition:width var(--t-drawer) var(--e-out)}
.ring{--p:0;width:112px;height:112px;border-radius:50%;position:relative;display:grid;place-items:center;
  background:conic-gradient(var(--gold-400) calc(var(--p)*1%),rgba(237,233,224,.08) 0)}
.ring::before{content:"";position:absolute;inset:9px;border-radius:50%;background:var(--ink-800)}
.ring>div{position:relative;text-align:center}

/* ---------- 时间线 ---------- */
.tl{position:relative;padding-left:18px}
.tl::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:1px;background:linear-gradient(180deg,rgba(237,233,224,.16),transparent)}
.tl-item{position:relative;padding:7px 0 7px 4px;font-size:13px;color:var(--text-2);cursor:pointer;border-radius:var(--r-xs);
  transition:color var(--t-hover) var(--e-out)}
.tl-item::before{content:"";position:absolute;left:-17px;top:14px;width:9px;height:9px;border-radius:50%;background:var(--ink-500);border:1px solid rgba(237,233,224,.2)}
.tl-item:hover{color:var(--text-1)}
.tl-item.cur{color:var(--text-1);font-weight:600}
.tl-item.cur::before{background:var(--gold-400);box-shadow:0 0 0 4px rgba(228,193,119,.16)}

/* ---------- 抽屉 / Toast / 骨架 ---------- */
.scrim{position:fixed;inset:0;z-index:60;background:rgba(6,8,12,.6);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity var(--t-drawer) var(--e-out)}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(420px,92vw);z-index:61;background:var(--ink-850);
  border-left:var(--hair);box-shadow:var(--shadow-3);padding:24px;overflow-y:auto;
  transform:translateX(18px);opacity:0;pointer-events:none;transition:all var(--t-drawer) var(--e-drawer)}
.drawer.on{transform:none;opacity:1;pointer-events:auto}
.toasts{position:fixed;left:50%;transform:translateX(-50%);bottom:28px;z-index:80;display:flex;flex-direction:column;gap:8px;align-items:center}
.toast{background:var(--ink-700);border:var(--hair-gold);border-radius:var(--r-pill);padding:9px 18px;font-size:14px;color:var(--text-1);box-shadow:var(--shadow-2);animation:enter var(--t-enter) var(--e-out) both}
.toast.bad{border-color:rgba(206,74,51,.5);color:var(--vermilion-400)}
.sk{background:var(--ink-700);border-radius:var(--r-sm);position:relative;overflow:hidden}
.sk::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(237,233,224,.08),transparent);animation:shimmer 1.2s linear infinite}
.empty{text-align:center;padding:56px 24px;border:1px dashed rgba(237,233,224,.14);border-radius:var(--r-lg)}
.empty .stamp{width:96px;height:96px;margin:0 auto 20px;border-radius:var(--r-md);border:1px solid rgba(206,74,51,.34);
  display:grid;place-items:center;font-family:var(--font-display);font-size:34px;color:rgba(206,74,51,.55);transform:rotate(-6deg)}
.errcard{border-left:2px solid var(--vermilion-500);background:rgba(206,74,51,.06);border-radius:var(--r-sm);padding:14px 16px}

/* ---------- 权限闸门：锁标 / 遮罩 / 计划徽章 ---------- */
.lockpill{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:var(--r-pill);
  font-size:12px;font-weight:600;color:var(--gold-300);background:rgba(228,193,119,.12);border:var(--hair-gold)}
.lockpill::before{content:"";width:10px;height:11px;background:currentColor;flex:0 0 auto;
  -webkit-mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M7.6 10.2V7.9a4.4 4.4 0 0 1 8.8 0v2.3h-2.1V7.9a2.3 2.3 0 0 0-4.6 0v2.3z'/><rect x='5' y='10.2' width='14' height='10.2' rx='2.2'/></svg>") center/contain no-repeat;
  mask:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'><path d='M7.6 10.2V7.9a4.4 4.4 0 0 1 8.8 0v2.3h-2.1V7.9a2.3 2.3 0 0 0-4.6 0v2.3z'/><rect x='5' y='10.2' width='14' height='10.2' rx='2.2'/></svg>") center/contain no-repeat}
.paper .lockpill{color:#8A6A1F;background:rgba(201,162,77,.16);border-color:rgba(201,162,77,.45)}

.gated{position:relative}
.gated>.gated-body{filter:saturate(.5);opacity:.5;pointer-events:none;user-select:none}
.gated::after{content:"";position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(180deg,rgba(10,12,17,.42),rgba(10,12,17,.6));pointer-events:none}
.paper.gated::after{background:linear-gradient(180deg,rgba(251,248,241,.62),rgba(246,241,230,.86))}
.gate-cta{position:absolute;inset:50% 0 auto 0;transform:translateY(-50%);margin:0 auto;width:max-content;z-index:2;
  box-shadow:var(--shadow-2),0 0 0 1px rgba(228,193,119,.4)}

/* 整页闸门（未登录 / 配额用尽） */
.gate{min-height:calc(100vh - 64px);display:grid;place-items:center;padding:48px 16px}
.gate-card{width:min(560px,100%);text-align:center;padding:44px 32px;border:var(--hair-gold);border-radius:var(--r-xl);
  background:radial-gradient(520px 220px at 50% 0,rgba(228,193,119,.12),transparent 70%),var(--ink-850);box-shadow:var(--shadow-3)}
.gate-seal{width:64px;height:64px;margin:0 auto 22px;border-radius:var(--r-md);border:1px solid rgba(206,74,51,.4);
  display:grid;place-items:center;font-family:var(--font-display);font-size:26px;color:rgba(206,74,51,.7);transform:rotate(-5deg)}
.gate-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:26px}
.gate-note{margin-top:18px;font-size:12px;color:var(--text-3)}

/* 计划徽章（顶栏） */
.planchip{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 12px;border-radius:var(--r-pill);
  border:var(--hair-strong);background:rgba(237,233,224,.03);font-size:13px;color:var(--text-2);cursor:pointer;
  transition:all var(--t-hover) var(--e-out)}
.planchip:hover{border-color:rgba(228,193,119,.4);color:var(--text-1)}
.planchip b{font-weight:600;color:var(--text-1)}
.planchip.gold{border-color:rgba(228,193,119,.5);background:rgba(228,193,119,.1)}
.planchip.gold b{color:var(--gold-300)}

/* ---------- 语音条 ---------- */
.voice{display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 14px 0 8px;border-radius:var(--r-pill);
  background:rgba(237,233,224,.04);border:var(--hair)}
.voice-play{width:26px;height:26px;border-radius:50%;background:linear-gradient(180deg,var(--gold-300),var(--gold-500));color:#17130A;display:grid;place-items:center;font-size:11px}
.wave{display:flex;align-items:center;gap:2px;height:18px}
.wave i{width:2px;height:6px;background:var(--text-3);border-radius:2px}
.voice.playing .wave i{background:var(--gold-400);animation:wave 1s ease-in-out infinite}
.voice.playing .wave i:nth-child(2n){animation-delay:.12s}
.voice.playing .wave i:nth-child(3n){animation-delay:.24s}
@keyframes wave{0%,100%{height:5px}50%{height:16px}}

/* AI 台词语音：角色台词旁的"这句出声"按钮（免费版试用 3 段，点一下让 AI 说出来） */
.msg-tts{width:24px;height:24px;min-width:24px;padding:0;border:0;background:transparent;color:var(--text-3);
  font-size:12px;line-height:1;opacity:.6;align-self:center;margin-left:auto}
.msg-tts:hover{opacity:1;color:var(--gold-400);border:0;background:transparent}