/* ============================================================
   帧境 · 意见助手  assistant.css
   设计语言承接 premium.css（Noir & Gold / 私人放映厅）
   - 复刻令牌：--ink / --gold / --gold-hi / --e-out / --font-display
   - 动效只动 transform / opacity / filter
   - 渐进披露：先看问题分类 → 再写细节 → 再确认工单
   ============================================================ */

.fa-root{
  --fa-w:392px;
  position:fixed;
  right:0;bottom:0;
  z-index:4000;
  pointer-events:none;
  font-family:var(--font-ui);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
}
.fa-root *{box-sizing:border-box}
.fa-root button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;padding:0}
.fa-root :focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:8px}

/* ---------------- 入口按钮 ---------------- */
.fa-launch{
  position:fixed;right:26px;bottom:26px;
  width:54px;height:54px;border-radius:50%;
  display:grid;place-items:center;
  pointer-events:auto;
  background:radial-gradient(130% 130% at 30% 18%,#1b1f21 0%,#0b0c0d 68%);
  border:1px solid rgba(201,169,97,.3);
  box-shadow:0 18px 42px -18px rgba(0,0,0,.95),inset 0 1px 0 rgba(255,255,255,.08);
  color:var(--gold-hi);
  transition:transform .5s var(--e-out),border-color .3s,box-shadow .5s var(--e-out),background .4s;
}
.fa-launch:hover{
  transform:translateY(-3px);
  border-color:rgba(201,169,97,.7);
  box-shadow:0 26px 52px -18px rgba(0,0,0,1),0 0 0 7px rgba(201,169,97,.07),inset 0 1px 0 rgba(255,255,255,.12);
}
.fa-launch::before{
  content:"";position:absolute;inset:-2px;border-radius:50%;
  border:1px solid rgba(201,169,97,.45);
  opacity:0;
  animation:fa-breathe 4.2s var(--e-soft) infinite;
}
@keyframes fa-breathe{
  0%{transform:scale(.94);opacity:.55}
  60%{transform:scale(1.35);opacity:0}
  100%{opacity:0}
}
.fa-launch-icons{position:relative;width:24px;height:24px}
.fa-launch-icons svg{
  position:absolute;inset:0;width:24px;height:24px;
  transition:transform .5s var(--e-out),opacity .32s var(--e-out);
}
.fa-icon-close{opacity:0;transform:rotate(-70deg) scale(.7)}
.fa-root.is-open .fa-icon-chat{opacity:0;transform:rotate(70deg) scale(.7)}
.fa-root.is-open .fa-icon-close{opacity:1;transform:none}
.fa-root.is-open .fa-launch{border-color:rgba(201,169,97,.55);background:radial-gradient(130% 130% at 30% 18%,#23201a 0%,#0d0c0a 70%)}

/* ---------------- 面板 ---------------- */
.fa-panel{
  position:fixed;
  right:26px;bottom:94px;
  width:var(--fa-w);
  max-height:min(690px,calc(100vh - 132px));
  display:flex;flex-direction:column;
  pointer-events:auto;
  overflow:hidden;
  border-radius:18px;
  border:1px solid rgba(201,169,97,.17);
  background:linear-gradient(168deg,#141719 0%,#0d0f10 46%,#08090a 100%);
  box-shadow:
    0 60px 120px -48px rgba(0,0,0,1),
    0 0 0 1px rgba(0,0,0,.45),
    inset 0 1px 0 rgba(255,255,255,.055);
  opacity:0;visibility:hidden;
  transform:translateY(18px) scale(.962);
  transform-origin:100% 100%;
  filter:blur(10px);
  transition:
    opacity .34s var(--e-out),
    transform .5s var(--e-out),
    filter .34s var(--e-out),
    visibility .5s;
}
.fa-panel::before{
  content:"";position:absolute;top:0;left:14%;right:14%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(201,169,97,.75),transparent);
  opacity:.85;
}
.fa-root.is-open .fa-panel{opacity:1;visibility:visible;transform:none;filter:none}

/* 头部 */
.fa-head{
  display:flex;align-items:center;gap:12px;
  padding:15px 16px 14px;
  border-bottom:1px solid rgba(255,255,255,.055);
}
.fa-mark{
  width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;
  border:1px solid rgba(201,169,97,.35);
  background:radial-gradient(120% 120% at 30% 20%,rgba(201,169,97,.16),rgba(201,169,97,.02));
  color:var(--gold-hi);
  font-family:Georgia,var(--font-display);font-size:17px;line-height:1;
  flex:none;
}
.fa-title{flex:1;min-width:0}
.fa-title h2{
  margin:0;font-family:var(--font-display);
  font-size:15px;font-weight:600;letter-spacing:2.4px;color:#f2ece0;
}
.fa-title p{
  margin:3px 0 0;font-size:11px;letter-spacing:.3px;color:var(--text-3);
  display:flex;align-items:center;gap:6px;
}
.fa-dot{
  width:5px;height:5px;border-radius:50%;background:#8fbf7a;
  box-shadow:0 0 8px rgba(143,191,122,.8);
  animation:fa-pulse 2.6s var(--e-soft) infinite;
}
@keyframes fa-pulse{0%,100%{opacity:1}50%{opacity:.35}}
.fa-close{
  width:30px;height:30px;border-radius:9px;flex:none;
  display:grid;place-items:center;color:var(--text-3);
  transition:color .25s,background .25s,transform .35s var(--e-out);
}
.fa-close:hover{color:#f2ece0;background:rgba(255,255,255,.06);transform:rotate(90deg)}
.fa-close svg{width:14px;height:14px}

/* 滚动区 */
.fa-body{
  flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:18px 16px 6px;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.14) transparent;
}
.fa-body::-webkit-scrollbar{width:6px}
.fa-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:3px}

/* 欢迎语 */
.fa-hello{margin-bottom:16px;animation:fa-in .5s var(--e-out) both}
.fa-hello h3{
  margin:0 0 8px;font-family:var(--font-display);
  font-size:20px;font-weight:600;letter-spacing:1.6px;color:#f4efe3;
}
.fa-hello p{margin:0;font-size:12.5px;line-height:1.9;color:var(--text-2);max-width:30ch}

/* 分类列表 */
.fa-topics{display:grid;gap:2px;margin:0 -6px 6px}
.fa-topic{
  display:flex;align-items:center;gap:12px;
  width:100%;padding:11px 10px;border-radius:11px;
  text-align:left;
  transition:background .25s,transform .35s var(--e-out);
  animation:fa-in .5s var(--e-out) both;
  animation-delay:calc(var(--i,0) * 45ms + 90ms);
}
.fa-topic:hover{background:rgba(201,169,97,.075);transform:translateX(2px)}
.fa-topic .ti{
  width:29px;height:29px;border-radius:9px;flex:none;
  display:grid;place-items:center;
  background:rgba(201,169,97,.09);
  border:1px solid rgba(201,169,97,.16);
  color:var(--gold-hi);
  transition:background .25s,border-color .25s;
}
.fa-topic:hover .ti{background:rgba(201,169,97,.17);border-color:rgba(201,169,97,.36)}
.fa-topic .ti svg{width:15px;height:15px}
.fa-topic .tl{flex:1;font-size:13px;letter-spacing:.2px;color:#e7e1d6}
.fa-topic .tc{
  font-size:10px;letter-spacing:.6px;color:var(--text-3);
  font-family:ui-monospace,Consolas,monospace;
  opacity:0;transform:translateX(-4px);
  transition:opacity .3s,transform .3s var(--e-out);
}
.fa-topic:hover .tc{opacity:1;transform:none}
.fa-topic .chev{width:13px;height:13px;color:var(--text-3);flex:none;transition:transform .3s var(--e-out),color .25s}
.fa-topic:hover .chev{transform:translateX(3px);color:var(--gold)}

/* 对话气泡 */
.fa-thread{display:flex;flex-direction:column;gap:12px;margin-bottom:4px}
.fa-msg{display:flex;animation:fa-in .44s var(--e-out) both}
.fa-msg.me{justify-content:flex-end}
.fa-bub{
  max-width:86%;padding:11px 13px;border-radius:14px;
  font-size:13px;line-height:1.75;letter-spacing:.2px;
  word-break:break-word;
}
.fa-msg.bot .fa-bub{
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.07);
  border-bottom-left-radius:5px;
  color:#ded8cd;
}
.fa-msg.me .fa-bub{
  background:linear-gradient(135deg,#efdcae,#c9a961);
  color:#1a1610;font-weight:500;
  border-bottom-right-radius:5px;
  box-shadow:0 8px 20px -12px rgba(201,169,97,.7);
}
.fa-bub .fa-k{color:var(--gold-hi);font-weight:600}
.fa-tagline{
  margin-top:8px;padding-top:8px;border-top:1px dashed rgba(255,255,255,.1);
  font-size:11px;color:var(--text-3);letter-spacing:.2px;
}

/* 打字指示 */
.fa-typing{display:inline-flex;gap:4px;align-items:center;height:8px}
.fa-typing i{
  width:4px;height:4px;border-radius:50%;background:rgba(201,169,97,.85);
  animation:fa-blink 1.2s var(--e-soft) infinite;
}
.fa-typing i:nth-child(2){animation-delay:.15s}
.fa-typing i:nth-child(3){animation-delay:.3s}
@keyframes fa-blink{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-2px)}}

/* 工单卡 */
.fa-ticket{
  margin-top:10px;padding:12px 13px;border-radius:12px;
  border:1px solid rgba(201,169,97,.22);
  background:linear-gradient(150deg,rgba(201,169,97,.11),rgba(201,169,97,.02) 70%);
}
.fa-ticket .fa-tid{
  display:flex;align-items:center;gap:8px;
  font-family:ui-monospace,Consolas,monospace;
  font-size:11.5px;letter-spacing:.6px;color:var(--gold-hi);
}
.fa-ticket .fa-tid b{font-weight:500}
.fa-steps{display:flex;gap:5px;margin:11px 0 8px}
.fa-step{
  flex:1;height:2px;border-radius:2px;position:relative;overflow:hidden;
  background:rgba(255,255,255,.09);
}
.fa-step.on::after{
  content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--gold),var(--gold-hi));
  transform-origin:left;animation:fa-fill .7s var(--e-out) both;
}
@keyframes fa-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.fa-ticket .fa-tstate{font-size:11px;color:var(--text-2);letter-spacing:.2px}
.fa-ticket .fa-tnote{margin-top:7px;font-size:11px;color:var(--gold-hi);opacity:.9}

/* 输入区 */
.fa-compose{display:none;padding:10px 16px 14px;border-top:1px solid rgba(255,255,255,.055)}
.fa-root.is-step2 .fa-compose{display:block;animation:fa-in .4s var(--e-out) both}
.fa-field{
  border-radius:12px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.075);
  transition:border-color .3s,background .3s;
  padding:10px 12px 8px;
}
.fa-field:focus-within{border-color:rgba(201,169,97,.5);background:rgba(255,255,255,.05)}
.fa-field textarea{
  display:block;width:100%;min-height:56px;max-height:150px;
  resize:none;border:0;background:none;outline:none;
  font:13px/1.7 var(--font-ui);color:#eae4d9;
  scrollbar-width:none;
}
.fa-field textarea::placeholder{color:#5f5d57}
.fa-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px}
.fa-hint{font-size:10.5px;color:#5f5d57;letter-spacing:.3px;transition:color .25s}
.fa-hint.warn{color:#d1a07a}
.fa-send{
  display:inline-flex;align-items:center;gap:6px;
  height:31px;padding:0 13px 0 15px;border-radius:99px;
  background:linear-gradient(135deg,#efdcae,#c9a961);
  color:#1a1610;font-size:12px;font-weight:600;letter-spacing:.6px;
  box-shadow:0 10px 22px -14px rgba(201,169,97,.9);
  transition:transform .3s var(--e-out),filter .25s,opacity .25s;
}
.fa-send:hover:not(:disabled){transform:translateY(-1px);filter:brightness(1.06)}
.fa-send:disabled{opacity:.35;box-shadow:none;cursor:default}
.fa-send svg{width:12px;height:12px}
.fa-back{
  display:inline-flex;align-items:center;gap:5px;
  font-size:11px;color:var(--text-3);transition:color .25s;
}
.fa-back:hover{color:var(--gold-hi)}
.fa-back svg{width:11px;height:11px}

/* 底部 */
.fa-foot{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 16px 11px;
  border-top:1px solid rgba(255,255,255,.045);
  background:rgba(0,0,0,.22);
  font-size:10.5px;color:#575650;letter-spacing:.4px;
}
.fa-foot button{
  display:inline-flex;align-items:center;gap:6px;
  font-size:10.5px;color:var(--text-3);letter-spacing:.3px;
  transition:color .25s;
}
.fa-foot button:hover{color:var(--gold-hi)}
.fa-count{
  min-width:15px;height:15px;padding:0 4px;border-radius:99px;
  display:none;place-items:center;
  background:rgba(201,169,97,.16);
  border:1px solid rgba(201,169,97,.3);
  color:var(--gold-hi);font-size:9px;line-height:1;
}
.fa-count.on{display:grid}

/* 我的反馈列表 */
.fa-mine{border-top:1px solid rgba(255,255,255,.055);padding:12px 16px 4px;display:none}
.fa-mine.on{display:block;animation:fa-in .35s var(--e-out) both}
.fa-mine-row{
  display:flex;align-items:center;gap:9px;
  padding:7px 0;font-size:11.5px;color:var(--text-2);
  border-bottom:1px dashed rgba(255,255,255,.05);
}
.fa-mine-row:last-child{border-bottom:0}
.fa-mine-row .id{font-family:ui-monospace,Consolas,monospace;font-size:10.5px;color:var(--text-3)}
.fa-mine-row .st{
  margin-left:auto;padding:1px 7px;border-radius:99px;font-size:10px;letter-spacing:.3px;
  border:1px solid rgba(255,255,255,.1);color:var(--text-3);
}
.fa-mine-row .st.doing{color:#e2c184;border-color:rgba(201,169,97,.35);background:rgba(201,169,97,.08)}
.fa-mine-row .st.done{color:#9dc48a;border-color:rgba(157,196,138,.32);background:rgba(157,196,138,.08)}
.fa-mine-row .st.ignore{color:#8a8880}

/* 入场动画 */
@keyframes fa-in{
  from{opacity:0;transform:translateY(7px)}
  to{opacity:1;transform:none}
}

/* 移动端：底部抽屉 */
@media(max-width:640px){
  .fa-panel{
    left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom));
    width:auto;max-height:84vh;border-radius:18px;
  }
  .fa-launch{
    right:16px;bottom:calc(18px + env(safe-area-inset-bottom));
    width:50px;height:50px;
  }
  .fa-hello h3{font-size:19px}
  .fa-body{padding:16px 14px 4px}
  .fa-compose{padding:10px 14px 12px}
  .fa-foot{padding:9px 14px 10px}
}

@media(prefers-reduced-motion:reduce){
  .fa-root *,.fa-root *::before,.fa-root *::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
}

/* ---------------- 步骤与补充状态 ---------------- */
.fa-root.is-step2 .fa-hello,
.fa-root.is-step2 .fa-topics{display:none}
.fa-root.is-sent .fa-compose{display:none!important}

.fa-again{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin:14px 0 8px;padding-top:12px;
  border-top:1px dashed rgba(255,255,255,.08);
  animation:fa-in .4s var(--e-out) both;
}
.fa-again button{
  font-size:11.5px;letter-spacing:.4px;color:var(--gold-hi);
  border:1px solid rgba(201,169,97,.3);background:rgba(201,169,97,.08);
  padding:6px 12px;border-radius:99px;
  transition:background .25s,border-color .25s,transform .3s var(--e-out);
}
.fa-again button:hover{background:rgba(201,169,97,.17);border-color:rgba(201,169,97,.55);transform:translateY(-1px)}
.fa-again span{font-size:10.5px;color:#575650;letter-spacing:.3px}

.fa-hint{font-size:10.5px;line-height:1.7;color:#d1a07a;margin-top:7px;letter-spacing:.2px}
.fa-hint:empty{display:none}

/* 首屏留白，避免"堆在一起" */
.fa-hello{padding:2px 2px 14px}
.fa-thread:empty{display:none}
.fa-thread{padding:0 0 4px}

/* ================= v2 精修：更松的呼吸感 + 更清晰的工单卡 ================= */
.fa-panel{width:400px}
.fa-head{padding:16px 18px 15px}
.fa-mark{width:36px;height:36px;font-size:18px}
.fa-body{padding:20px 18px 8px}
.fa-hello{padding:2px 2px 16px}
.fa-hello h3{font-size:21px;letter-spacing:1.8px;margin-bottom:10px}
.fa-hello p{font-size:12.5px;line-height:1.95;max-width:32ch}
.fa-topics{gap:4px;margin:2px -8px 2px}
.fa-topic{min-height:46px;padding:10px 12px;border-radius:12px}
.fa-topic .tl{font-size:13.5px}
.fa-topic .ti{width:30px;height:30px;border-radius:10px}
.fa-thread{gap:14px}
.fa-bub{font-size:13.5px;line-height:1.8;padding:12px 14px}
.fa-compose{padding:12px 18px 16px}
.fa-field{padding:12px 13px 10px;border-radius:13px}
.fa-field textarea{min-height:64px;font-size:13.5px}
.fa-send{height:34px;padding:0 16px 0 17px;font-size:12.5px}
.fa-foot{padding:10px 18px 12px}

.fa-ticket{display:grid;grid-template-columns:auto 1fr;gap:12px;padding:14px;border-radius:13px;margin-top:12px}
.fa-tick-ico{
  width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:none;
  border:1px solid rgba(201,169,97,.45);background:rgba(201,169,97,.14);color:var(--gold-hi);
}
.fa-tick-ico svg{width:15px;height:15px}
.fa-tick-main{min-width:0}
.fa-tick-top{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.fa-tick-top b{font-size:12.5px;letter-spacing:.8px;color:#f2ece0;font-weight:600}
.fa-tick-top span{font-family:ui-monospace,Consolas,monospace;font-size:10.5px;color:var(--gold-hi);opacity:.75}
.fa-steplabels{display:flex;justify-content:space-between;font-size:10px;color:#565550;letter-spacing:.5px;margin-top:7px}
.fa-steplabels .on{color:var(--gold-hi)}
.fa-ticket .fa-tstate{font-size:11.5px;color:var(--text-2);margin-top:9px;letter-spacing:.2px}

/* ================= 小静 · 人设与打招呼气泡 ================= */
.fa-ava{
  width:36px;height:36px;border-radius:50%;flex:none;
  display:grid;place-items:center;
  font-family:var(--font-display);font-size:15px;letter-spacing:0;
  color:#1a1610;
  background:linear-gradient(135deg,#efdcae,#c9a961);
  box-shadow:0 8px 18px -10px rgba(201,169,97,.85);
}
.fa-ava.sm{width:24px;height:24px;font-size:11px;margin-right:8px;margin-top:1px;box-shadow:none;opacity:.9}
.fa-msg.bot{align-items:flex-start}
.fa-msg.bot .fa-bub{max-width:calc(100% - 34px)}

.fa-pop{
  position:fixed;right:26px;bottom:96px;z-index:3999;width:300px;
  padding:16px 16px 15px;border-radius:16px;
  background:linear-gradient(165deg,#17191b 0%,#0b0c0d 72%);
  border:1px solid rgba(201,169,97,.22);
  box-shadow:0 44px 90px -44px rgba(0,0,0,1),inset 0 1px 0 rgba(255,255,255,.05);
  opacity:0;visibility:hidden;transform:translateY(12px) scale(.97);transform-origin:100% 100%;
  transition:opacity .32s var(--e-out),transform .46s var(--e-out),visibility .46s;
  pointer-events:auto;
}
.fa-pop.on{opacity:1;visibility:visible;transform:none}
.fa-pop::after{
  content:"";position:absolute;right:24px;bottom:-6px;width:11px;height:11px;
  background:#0b0c0d;border-right:1px solid rgba(201,169,97,.22);border-bottom:1px solid rgba(201,169,97,.22);
  transform:rotate(45deg);
}
.fa-pop-top{display:flex;align-items:center;gap:10px;margin-bottom:11px}
.fa-pop-top b{display:block;font-size:13px;letter-spacing:1.2px;color:#f2ece0;font-weight:600}
.fa-pop-top small{display:block;font-size:10.5px;letter-spacing:.4px;color:var(--text-3);margin-top:2px}
.fa-pop-text{margin:0 0 13px;font-size:12.5px;line-height:1.9;color:var(--text-2);cursor:pointer}
.fa-pop-acts{display:flex;gap:8px}
.fa-pop-acts button{
  height:30px;padding:0 14px;border-radius:99px;font-size:11.5px;letter-spacing:.4px;
  border:1px solid rgba(255,255,255,.12);color:var(--text-2);background:rgba(255,255,255,.04);
  transition:border-color .25s,color .25s,transform .3s var(--e-out);
}
.fa-pop-acts button:hover{border-color:rgba(201,169,97,.5);color:var(--gold-hi);transform:translateY(-1px)}
.fa-pop-acts .fa-pop-go{
  background:linear-gradient(135deg,#efdcae,#c9a961);border-color:transparent;color:#1a1610;font-weight:600;
}
.fa-pop-acts .fa-pop-go:hover{filter:brightness(1.05);color:#1a1610}
.fa-pop-x{position:absolute;top:9px;right:9px;width:22px;height:22px;border-radius:6px;color:#575650;font-size:10px;line-height:1}
.fa-pop-x:hover{color:#f2ece0;background:rgba(255,255,255,.07)}

@media(max-width:640px){
  .fa-pop{left:12px;right:12px;width:auto;bottom:calc(80px + env(safe-area-inset-bottom))}
  .fa-pop::after{display:none}
}
