:host { --yf-graphite:#242626; --yf-ink:#171918; --yf-ivory:#f5f1e8; --yf-paper:#fffdf8; --yf-muted:#6e706b; --yf-line:#d9d4c9; --yf-orange:#e9682a; --yf-error:#9c3128; --yf-r:4px; font-family:"Microsoft YaHei","PingFang SC",Arial,sans-serif; color:var(--yf-ink); line-height:1.5; }
*,*::before,*::after { box-sizing:border-box; }
button,textarea,input { font:inherit; }
button { cursor:pointer; }
.yf-sr { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
.yf-launcher { position:fixed;z-index:2147483000;right:24px;bottom:24px;display:flex;align-items:center;gap:10px;min-height:52px;padding:8px 17px 8px 8px;border:1px solid #111;border-radius:2px;background:var(--yf-graphite);color:#fff;box-shadow:0 14px 34px #1114;font-weight:700;letter-spacing:.04em; }
.yf-launcher-mark { display:grid;place-items:center;width:34px;height:34px;background:var(--yf-orange);color:#fff;font-size:11px;letter-spacing:.12em; }
.yf-launcher:hover { transform:translateY(-2px); }
.yf-panel { position:fixed;z-index:2147483001;right:24px;bottom:88px;width:min(400px,calc(100vw - 32px));height:min(680px,calc(100vh - 112px));overflow:hidden;border:1px solid #bdb7ab;border-radius:var(--yf-r);background:var(--yf-paper);box-shadow:0 24px 70px #1115; }
.yf-panel::before { content:"";pointer-events:none;position:absolute;inset:0;opacity:.16;background-image:repeating-linear-gradient(115deg,transparent 0 3px,#5e5e5e0b 4px 5px); }
.yf-panel[hidden] { display:none; }
.yf-head { position:relative;display:flex;align-items:center;justify-content:space-between;padding:18px 18px 14px;border-bottom:1px solid #4b4c49;background:var(--yf-graphite);color:#fff; }
.yf-head::after { content:"";position:absolute;left:0;bottom:-1px;width:86px;height:3px;background:var(--yf-orange); }
.yf-kicker { color:#c7c6be;font-size:10px;letter-spacing:.17em; }
.yf-head h2 { margin:2px 0 0;font-family:"Microsoft YaHei",sans-serif;font-size:20px;letter-spacing:.03em; }
.yf-close { display:grid;place-items:center;width:36px;height:36px;border:1px solid #ffffff40;background:transparent;color:#fff;font-size:25px;line-height:1; }
.yf-status { position:relative;display:flex;align-items:center;gap:8px;padding:7px 18px;border-bottom:1px solid var(--yf-line);background:var(--yf-ivory);color:var(--yf-muted);font-size:11px; }
.yf-status span { width:7px;height:7px;border-radius:50%;background:#4d8a62;box-shadow:0 0 0 3px #4d8a6218; }
.yf-body { position:relative;display:grid;grid-template-columns:auto 1fr;height:calc(100% - 99px);min-height:0; }
.yf-rail { width:78px;overflow:auto;border-right:1px solid var(--yf-line);background:#eee9df;padding:15px 10px; }
.yf-rail[hidden] { display:none; }
.yf-rail-title { display:block;margin-bottom:12px;color:var(--yf-muted);font-size:9px;font-weight:700;letter-spacing:.13em; }
.yf-rail ol { list-style:none;margin:0;padding:0; }
.yf-rail li { position:relative;display:grid;justify-items:center;gap:3px;padding-bottom:14px;color:#85867f;font-size:9px;text-align:center; }
.yf-rail li:not(:last-child)::after { content:"";position:absolute;top:20px;bottom:1px;left:50%;width:1px;background:#c8c2b7; }
.yf-rail i { position:relative;z-index:1;display:grid;place-items:center;width:20px;height:20px;border:1px solid #aaa69d;border-radius:50%;background:#eee9df;font-style:normal;font-size:9px; }
.yf-rail .is-done i { border-color:var(--yf-graphite);background:var(--yf-graphite);color:#fff; }
.yf-rail .is-active { color:var(--yf-ink);font-weight:700; }
.yf-rail .is-active i { border-color:var(--yf-orange);background:var(--yf-orange);color:#fff;box-shadow:0 0 0 3px #e9682a22; }
.yf-conversation { display:flex;min-width:0;min-height:0;flex-direction:column; }
.yf-messages { flex:1;overflow:auto;padding:16px;scroll-behavior:smooth; }
.yf-message { display:flex;flex-direction:column;align-items:flex-start;margin:0 0 14px; }
.yf-message-label { margin:0 0 4px;color:var(--yf-muted);font-size:10px;letter-spacing:.05em; }
.yf-message p { max-width:88%;margin:0;padding:10px 12px;border:1px solid var(--yf-line);border-radius:2px 10px 10px 10px;background:var(--yf-ivory);font-size:13px;white-space:pre-wrap; }
.yf-user { align-items:flex-end; }
.yf-user p { border-color:var(--yf-graphite);border-radius:10px 2px 10px 10px;background:var(--yf-graphite);color:#fff; }
.yf-actions { display:flex;gap:6px;overflow-x:auto;padding:0 14px 10px;scrollbar-width:thin; }
.yf-actions button,.yf-skip,.yf-retry { flex:0 0 auto;border:1px solid #aaa69d;border-radius:999px;background:transparent;color:var(--yf-ink);padding:6px 10px;font-size:11px; }
.yf-actions button:hover { border-color:var(--yf-orange);color:#b74415; }
.yf-upload { margin:0 14px 10px;padding:10px;border:1px dashed #aaa69d;background:var(--yf-ivory);font-size:11px; }
.yf-upload label { display:block;font-weight:700;margin-bottom:6px; }
.yf-upload input { width:100%;font-size:10px; }
.yf-upload-row { display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px;color:var(--yf-muted); }
.yf-fallback { display:grid;gap:4px;margin:0 14px 10px;padding:10px;border-left:3px solid var(--yf-error);background:#f7eae5;font-size:11px; }
.yf-fallback[hidden] { display:none; }
.yf-fallback span { color:#5f4d47; }.yf-fallback a { color:var(--yf-error);font-weight:700; }.yf-retry { justify-self:start;margin-top:3px;background:#fff; }
.yf-compose { display:grid;grid-template-columns:1fr auto;gap:8px;padding:10px 14px 8px;border-top:1px solid var(--yf-line);background:#fffdfa; }
.yf-compose textarea { min-width:0;min-height:42px;max-height:90px;resize:none;border:1px solid #aaa69d;border-radius:2px;background:#fff;padding:10px;color:var(--yf-ink);outline:none; }
.yf-compose textarea:focus { border-color:var(--yf-orange);box-shadow:0 0 0 3px #e9682a22; }
.yf-compose button { display:flex;align-items:center;gap:7px;border:1px solid #bd4819;border-radius:2px;background:var(--yf-orange);color:#fff;padding:0 13px;font-weight:700; }
.yf-compose button:disabled { cursor:wait;opacity:.55; }
.yf-privacy { margin:0;padding:0 14px 10px;color:var(--yf-muted);font-size:9px;line-height:1.4; }
button:focus-visible,input:focus-visible,textarea:focus-visible,a:focus-visible { outline:3px solid #f59b6f;outline-offset:2px; }
@media (max-width:520px) {
  .yf-panel { inset:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));width:auto;height:auto;border-radius:2px; }
  .yf-launcher { right:max(12px,env(safe-area-inset-right));bottom:max(12px,env(safe-area-inset-bottom)); }
  .yf-rail { width:65px;padding-inline:6px; }.yf-compose button span { display:none; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important;transition:none!important;animation:none!important; }.yf-launcher:hover { transform:none; } }