/* ============================================================
   css/panels/panels-beta-feedback.css — 意见箱（TASK-BUGBOX-001）
   设计口径：韩法系唯美、衬线体为主、禁 emoji、线条 CSS 图标；
   竖屏限宽 480（面板挂 #app 内），窄屏 <370px 适配，所有触碰有过渡反馈。

   壳层的三条硬口径：
     ① 面板是「固定头 + 可滚中段 + 固定底」的纵向 flex —— 键盘起来时只缩中段，头和发送键永远在。
     ② 高度只用 JS 量出来的 maxHeight（kstar-motion #161/#165），这里绝不给 height 加 transition。
     ③ 入场只用透明度（长期规则 #154：一个元素只留一个插入口，别在动画里改尺寸）。
   ============================================================ */

/* ===== 设置页那行说明（服务区第一张卡里的一行）=====
   ★ .ui3-flex-sub / is-beta / ui3-flex-new 三个名字与 js/panels/panels-beta-feedback.js 的
   「看过就不再高亮」记账链是同一套（它按 id=ui3-beta-oneline 找卡片、再摘掉 ui3-flex-new），
   改名会让那行高亮静默不再出现 —— 结构可以改，这三个名字不许动。 */
.ui3-flex-sub {
    margin-top: 3px;
    font-size: 11px;
    line-height: 1.45;
    color: var(--text-muted);
}
/* 意见箱那一张：服务区第一张，视觉上压过其余三张（甲方担心藏在设置页里不好找） */
.ui3-svc-card.is-beta { min-height: 62px; }
.ui3-svc-card.is-beta .ui3-svc-name {
    font-size: 15px;
    letter-spacing: .03em;
}
.ui3-svc-card.is-beta .ui3-svc-go { color: var(--rose); }
.ui3-svc-card.is-beta.ui3-flex-new {
    background: var(--rose-faint, rgba(201, 168, 168, .14));
    border-color: rgba(201, 168, 168, .34);
}
.ui3-svc-card.is-beta.ui3-flex-new .ui3-flex-sub { color: var(--rose); }

/* ===== 面板外壳 ===== */
.bfb-overlay {
    position: fixed;
    top: 0; bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 480px;
    z-index: 1700;
    background: rgba(0, 0, 0, .45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    padding-bottom: calc(16px + var(--safe-bottom, 0px));
    opacity: 0;
    transition: opacity .22s ease;
    -webkit-tap-highlight-color: transparent;
}
.bfb-overlay.open { opacity: 1; }
.bfb-overlay.is-kbd { align-items: flex-end; }

.bfb-panel {
    width: 100%;
    max-width: 400px;
    max-height: 88%;
    background: var(--surface-solid);
    border: 0.5px solid var(--border);
    border-radius: 20px;
    box-shadow: var(--shadow-lg, 0 12px 40px rgba(0, 0, 0, .18));
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(8px) scale(.985);
    transition: transform .24s cubic-bezier(.22, .8, .3, 1);
}
.bfb-overlay.open .bfb-panel { transform: translateY(0) scale(1); }

/* ===== 头：固定，永不滚走 ===== */
.bfb-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 14px 10px 16px;
    border-bottom: 0.5px solid var(--border);
    background: var(--surface-solid);
    flex: 0 0 auto;
}
.bfb-head-l { min-width: 0; }
.bfb-t1 {
    display: block;
    font-family: var(--font-body);
    font-size: 17px;
    letter-spacing: .04em;
    color: var(--text-primary);
}
.bfb-t2 {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.4;
}
.bfb-close {
    flex: 0 0 auto;
    width: 34px; height: 34px;
    margin-top: -2px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    position: relative;
    cursor: pointer;
    transition: background .16s ease, transform .16s ease;
}
.bfb-close:active { background: var(--divider); transform: scale(.92); }
.bfb-close-a, .bfb-close-b {
    position: absolute;
    left: 50%; top: 50%;
    width: 15px; height: 1.5px;
    margin: -0.75px 0 0 -7.5px;
    background: var(--text-muted);
    border-radius: 2px;
}
.bfb-close-a { transform: rotate(45deg); }
.bfb-close-b { transform: rotate(-45deg); }

/* ===== 分类器：BUG 反馈 / 想法建议 =====
   v9 分段控件（与记忆库 .ui3mem-seg 同一套口径）：一条软底轨道 + 两段等宽，
   选中那段「浮起来」，不再画两张各自带边框的大卡（甲方说那样很随意）。 */
.bfb-tabs {
    display: flex;
    gap: 2px;
    padding: 3px;
    margin: 12px 16px 0 16px;
    border: 1px solid var(--u-line, var(--border));
    border-radius: 15px;
    background: var(--u-surface-soft, var(--divider));
    flex: 0 0 auto;
}
.bfb-tab {
    flex: 1 1 0;
    min-width: 0;
    min-height: 46px;                /* 触摸目标 ≥44（长期规则 #244） */
    text-align: center;
    padding: 7px 8px;
    border: 0;
    border-radius: 12px;
    background: none;
    cursor: pointer;
    transition: background .18s ease, box-shadow .18s ease, transform .16s ease;
}
.bfb-tab:active { transform: scale(.985); }
.bfb-tab-lb {
    display: block;
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--text-secondary, var(--text-muted));
    letter-spacing: .03em;
}
.bfb-tab-sub {
    display: block;
    margin-top: 1px;
    font-size: 10px;
    line-height: 1.35;
    color: var(--text-muted);
}
.bfb-tab.on {
    background: var(--u-surface-strong, var(--surface-solid));
    box-shadow: 0 2px 8px rgba(170, 120, 100, .10);
}
.bfb-tab.on .bfb-tab-lb { color: var(--rose); }
.bfb-tab.on .bfb-tab-sub { color: var(--text-muted); opacity: 1; }

/* ===== 中段：唯一可滚的区域 ===== */
.bfb-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 10px 16px 4px 16px;
}

.bfb-write { position: relative; }
.bfb-text {
    width: 100%;
    box-sizing: border-box;
    min-height: 96px;
    max-height: 240px;
    padding: 11px 12px 22px 12px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: var(--divider);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.6;
    resize: none;
    outline: none;
    transition: border-color .18s ease;
}
.bfb-text:focus { border-color: var(--rose); }
.bfb-wc {
    position: absolute;
    right: 11px; bottom: 7px;
    font-size: 10px;
    color: var(--text-muted);
    opacity: .7;
    pointer-events: none;
}

.bfb-sec { margin-top: 15px; }
.bfb-lb {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 12px;
    letter-spacing: .03em;
    color: var(--text-secondary, var(--text-muted));
    margin-bottom: 8px;
}
.bfb-lb-hint { font-size: 10px; color: var(--text-muted); opacity: .8; }

.bfb-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.bfb-chip {
    min-height: 40px;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-solid);
    color: var(--text-secondary, var(--text-primary));
    font-size: 12px;
    font-family: inherit;
    cursor: pointer;
    transition: border-color .16s ease, color .16s ease, background .16s ease, transform .16s ease;
}
.bfb-chip:active { transform: scale(.96); }
.bfb-chip.on { border-color: var(--rose); color: var(--rose); background: var(--rose-faint, rgba(201,168,168,.14)); }

/* ===== 附件 ===== */
.bfb-att { display: flex; flex-direction: column; gap: 7px; }
.bfb-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 10px;
    border: 0;
    border-radius: 14px;
    background: var(--u-surface-soft, var(--divider));
}
.bfb-item.is-failed { background: rgba(200, 90, 90, .10); }
.bfb-item.is-failed .bfb-item-n { color: var(--danger, #c85a5a); }
.bfb-item.is-uploading, .bfb-item.is-compressing { opacity: .82; }
.bfb-thumb {
    width: 40px; height: 40px;
    border-radius: 10px;
    object-fit: cover;
    flex: 0 0 auto;
    background: var(--divider);
}
.bfb-vico, .bfb-aico {
    width: 40px; height: 40px;
    border-radius: 10px;
    flex: 0 0 auto;
    background: var(--divider);
    position: relative;
}
.bfb-play {
    position: absolute;
    left: 50%; top: 50%;
    width: 0; height: 0;
    margin: -6px 0 0 -4px;
    border-left: 9px solid var(--rose);
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
}
.bfb-aico::before {
    content: '';
    position: absolute;
    left: 11px; top: 13px;
    width: 18px; height: 13px;
    border: 1.4px solid var(--rose);
    border-radius: 3px;
    box-sizing: border-box;
}
.bfb-item-tx { flex: 1 1 auto; min-width: 0; }
.bfb-item-n {
    font-size: 12.5px;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bfb-item-s { margin-top: 2px; font-size: 10.5px; color: var(--text-muted); line-height: 1.4; }
.bfb-item.is-failed .bfb-item-s { color: var(--danger, #c85a5a); }
.bfb-item-x {
    position: relative;
    flex: 0 0 auto;
    width: 30px; height: 30px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    cursor: pointer;
}
.bfb-item-x:active { background: var(--divider); }
.bfb-item-x .bfb-close-a, .bfb-item-x .bfb-close-b { width: 12px; margin-left: -6px; }

/* 「加东西」两颗：v9 用软玫瑰底，不用灰色虚线框（甲方说原来那个很随意） */
.bfb-add { display: flex; gap: 8px; margin-top: 9px; }
.bfb-add-btn {
    flex: 1 1 0;
    min-height: 44px;                /* 触摸目标 ≥44（长期规则 #244） */
    border: 0;
    border-radius: 14px;
    background: var(--rose-light, rgba(201, 168, 168, .12));
    color: var(--rose-dark, #A88080);
    font-size: 12.5px;
    font-family: inherit;
    letter-spacing: .03em;
    cursor: pointer;
    transition: background .16s ease, transform .16s ease;
}
.bfb-add-btn:active { transform: scale(.985); }
.bfb-add-btn:disabled { opacity: .45; cursor: default; }
.bfb-add-btn:not(:disabled):hover,
.bfb-add-btn:not(:disabled):active { background: var(--rose-faint, rgba(201, 168, 168, .2)); }

/* ===== 底：发送键固定，永不滚走、永不被键盘盖 ===== */
.bfb-foot {
    flex: 0 0 auto;
    padding: 10px 16px calc(12px + var(--safe-bottom, 0px)) 16px;
    border-top: 0.5px solid var(--border);
    background: var(--surface-solid);
}
.bfb-overlay.is-kbd .bfb-foot { padding-bottom: 12px; }
.bfb-send {
    width: 100%;
    min-height: 46px;
    border: 0;
    border-radius: 13px;
    background: var(--rose);
    color: #fff;
    font-size: 14.5px;
    font-family: inherit;
    letter-spacing: .08em;
    cursor: pointer;
    transition: opacity .18s ease, transform .16s ease;
}
.bfb-send:active:not(:disabled) { transform: scale(.985); }
.bfb-send:disabled { opacity: .42; cursor: default; }
.bfb-foot-hint { margin-top: 7px; text-align: center; font-size: 10.5px; color: var(--text-muted); }
.bfb-foot-hint:empty { display: none; }          /* 没话说就一点都不占位（不留白条） */

/* ===== 聊天记录片段（第二层，同一套壳）===== */
.bfb-overlay.bfb-ex { z-index: 1710; }
/* 两种挑法：与面板里的分类器同一套分段控件口径 */
.bfb-ex-seg {
    display: flex;
    gap: 2px;
    padding: 3px;
    margin: 10px 16px 0 16px;
    border: 1px solid var(--u-line, var(--border));
    border-radius: 15px;
    background: var(--u-surface-soft, var(--divider));
    flex: 0 0 auto;
}
.bfb-ex-seg-btn {
    flex: 1 1 0;
    min-height: 40px;
    border: 0;
    border-radius: 12px;
    background: none;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 12.5px;
    letter-spacing: .03em;
    cursor: pointer;
    transition: background .18s ease, box-shadow .18s ease, color .18s ease;
}
.bfb-ex-seg-btn.on {
    background: var(--u-surface-strong, var(--surface-solid));
    color: var(--rose);
    box-shadow: 0 2px 8px rgba(170, 120, 100, .10);
}
/* ============================================================
   块 C4：「我的反馈」列表 + 事件子页（TASK-KSTAR-INBOX-001）
   两页签（写一条 / 我的反馈）＋ 一套事件子页；四档进度只照服务端给的 stage 渲染。
   ============================================================ */
.bfb-tab.has-new .bfb-tab-lb { color: var(--rose); }
.bfb-tab.has-new .bfb-tab-sub { color: var(--rose); opacity: 1; }

.bfb-body.bfb-mine { display: none; padding: 8px 16px 4px 16px; }
.bfb-mine-loading,
.bfb-mine-empty {
    padding: 30px 6px;
    text-align: center;
    font-size: 12px;
    line-height: 1.9;
    color: var(--text-muted);
}
.bfb-mine-item {
    padding: 12px 13px;
    margin-bottom: 9px;
    border: 1px solid var(--u-line, var(--border));
    border-radius: 14px;
    background: var(--u-surface-soft, var(--divider));
    transition: transform .18s ease, background .18s ease;
}
.bfb-mine-item:active { transform: scale(.985); }
.bfb-mine-item.has-new { border-color: var(--rose); }
.bfb-mine-top { display: flex; align-items: center; gap: 8px; }
.bfb-st {
    flex: 0 0 auto;
    padding: 2.5px 9px;
    border-radius: 9px;
    font-size: 10.5px;
    line-height: 1.5;
    color: var(--rose-dark, #A88080);
    background: var(--rose-faint, rgba(201, 168, 168, .14));
}
.bfb-st-done { color: #6f8f6f; background: rgba(120, 160, 120, .14); }
.bfb-mine-time { flex: 1 1 auto; min-width: 0; text-align: right; font-size: 10.5px; color: var(--text-muted); }
.bfb-mine-dot {
    flex: 0 0 auto;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--rose);
}
.bfb-mine-ex {
    margin-top: 7px;
    font-size: 12.5px;
    line-height: 1.62;
    color: var(--text-primary);
    word-break: break-word;
}
.bfb-mine-meta { margin-top: 5px; font-size: 10.5px; line-height: 1.5; color: var(--text-muted); }
.bfb-mine-last {
    margin-top: 7px;
    padding: 7px 9px;
    border-radius: 10px;
    font-size: 11.5px;
    line-height: 1.6;
    color: var(--text-secondary, var(--text-muted));
    background: var(--u-surface-strong, var(--surface-solid));
    word-break: break-word;
}

/* 事件子页：挂在意见箱之上（比挑聊天记录再高一层，但都低于系统级全屏层） */
.bfb-overlay.bfb-fbx { z-index: 1720; }
.bfb-fb-input { min-height: 54px !important; margin-bottom: 8px; }
.bfb-fbx-meta,
.bfb-fbx-time { font-size: 10.5px; line-height: 1.5; color: var(--text-muted); }
.bfb-fbx-meta { margin-top: 12px; }
.bfb-fbx-body {
    margin-top: 9px;
    font-size: 13px;
    line-height: 1.75;
    color: var(--text-primary);
    word-break: break-word;
}
.bfb-fbx-atts { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 11px; }
.bfb-fb-att {
    max-width: 100%;
    padding: 5px 10px;
    border: 1px solid var(--u-line, var(--border));
    border-radius: 10px;
    font-size: 11px;
    line-height: 1.5;
    color: var(--rose-dark, #A88080);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bfb-fb-att.is-off { color: var(--text-muted); }

/* 四档进度条 */
.bfb-steps { margin-top: 4px; }
.bfb-step {
    position: relative;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 0 15px 0;
}
.bfb-step:last-child { padding-bottom: 0; }
.bfb-step::before {
    content: '';
    position: absolute;
    left: 4px; top: 12px; bottom: 0;
    width: 1px;
    background: var(--divider);
}
.bfb-step:last-child::before { display: none; }
.bfb-step-dot {
    flex: 0 0 auto;
    width: 9px; height: 9px;
    border-radius: 50%;
    background: var(--divider);
    box-shadow: 0 0 0 3px var(--u-surface-soft, var(--divider));
}
.bfb-step-lb { flex: 1 1 auto; min-width: 0; font-size: 12px; line-height: 1.5; color: var(--text-muted); }
.bfb-step-tm { flex: 0 0 auto; font-size: 10.5px; color: var(--text-muted); }
.bfb-step.is-done .bfb-step-dot { background: var(--rose); }
.bfb-step.is-done .bfb-step-lb { color: var(--text-secondary, var(--text-muted)); }
.bfb-step.is-now .bfb-step-dot { background: var(--rose); box-shadow: 0 0 0 4px var(--rose-faint, rgba(201, 168, 168, .2)); }
.bfb-step.is-now .bfb-step-lb { color: var(--rose); }
.bfb-step.is-now .bfb-step-tm { color: var(--rose); }

/* 留言时间轴 */
.bfb-fbx-tl {
    margin-top: 15px;
    padding-top: 13px;
    border-top: 1px solid var(--divider);
}
.bfb-fbx-say { margin-bottom: 9px; }
.bfb-fbx-say-t {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 10.5px;
    color: var(--text-muted);
}
.bfb-fbx-say-w { margin-left: auto; }
.bfb-fbx-say-b {
    margin-top: 4px;
    padding: 8px 11px;
    border-radius: 4px 12px 12px 12px;
    font-size: 12.5px;
    line-height: 1.68;
    color: var(--text-primary);
    background: var(--u-surface-strong, var(--surface-solid));
    word-break: break-word;
}
.bfb-fbx-say.is-me .bfb-fbx-say-t { justify-content: flex-end; }
.bfb-fbx-say.is-me .bfb-fbx-say-w { margin-left: 0; }
.bfb-fbx-say.is-me .bfb-fbx-say-b {
    border-radius: 12px 4px 12px 12px;
    background: var(--rose-faint, rgba(201, 168, 168, .16));
}

.bfb-ex-note {
    flex: 0 0 auto;
    padding: 10px 16px 0 16px;
    font-size: 11px;
    line-height: 1.5;
    color: var(--text-muted);
}
.bfb-ex-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 10px 16px;
}
.bfb-ex-loading { padding: 24px 4px; text-align: center; font-size: 11.5px; line-height: 1.7; color: var(--text-muted); }
.bfb-ex-line {
    display: flex;
    gap: 8px;
    padding: 8px 9px;
    margin-bottom: 5px;
    border: 1px solid transparent;
    border-radius: 12px;
    cursor: pointer;
    transition: background .14s ease, border-color .14s ease;
}
.bfb-ex-line:active { background: var(--divider); }
.bfb-ex-line.on { border-color: var(--rose); background: var(--rose-faint, rgba(201,168,168,.14)); }
.bfb-ex-who { flex: 0 0 auto; font-size: 10.5px; color: var(--text-muted); padding-top: 1px; }
.bfb-ex-line.on .bfb-ex-who { color: var(--rose); }
.bfb-ex-tx { flex: 1 1 auto; min-width: 0; font-size: 12.5px; line-height: 1.55; color: var(--text-primary); word-break: break-word; }

/* ===== 第一次上线的引导：整屏压暗 + 居中一张卡，三步逐条走（挂 #app 内）
   没有叉、不能划走、不会自己消失；出口两条：走到最后点「现在就去说说」/ 点空白处，都算她点掉了 ===== */
.bfg-gate {
    position: absolute;
    inset: 0;
    z-index: 1730;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity .26s ease;
    touch-action: none;              /* 卡片在场时背后的设置页不许跟着滚 → 不会"底下一动一动" */
    overscroll-behavior: contain;
}
.bfg-gate.show { opacity: 1; }
.bfg-gate.out { opacity: 0; pointer-events: none; }
.bfg-veil { position: absolute; inset: 0; background: rgba(18, 14, 12, .5); }
.bfg-card {
    position: relative;
    width: 100%;
    max-width: 322px;
    padding: 15px 17px 12px 17px;
    border: 0.5px solid var(--border);
    border-radius: 20px;
    background: var(--surface-solid);
    box-shadow: var(--shadow-lg, 0 10px 30px rgba(0, 0, 0, .16));
    transform: translateY(13px) scale(.982);
    transition: transform .42s cubic-bezier(.16, 1, .3, 1);
}
.bfg-gate.show .bfg-card { transform: none; }
.bfg-gate.out .bfg-card { transform: translateY(6px) scale(.992); }

.bfg-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.bfg-tag { font-size: 10px; letter-spacing: .1em; color: var(--rose); }
.bfg-count { font-size: 10px; letter-spacing: .06em; color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* 三步叠在同一格里：卡片高度恒等于最高那一步 → 换步时卡片一动不动（「乱跳」的根就在这儿） */
.bfg-steps { display: grid; margin-top: 9px; }
.bfg-step {
    grid-area: 1 / 1;
    opacity: 0;
    transform: translateY(9px);
    transition: opacity .26s ease, transform .4s cubic-bezier(.16, 1, .3, 1);
    pointer-events: none;
}
.bfg-step.is-on { opacity: 1; transform: none; pointer-events: auto; }

/* 一枚线稿小图标：信封 / 附页 / 对话泡（全部 CSS 画，不用图片、不用任何字符） */
.bfg-ico { position: relative; display: block; margin: 0 auto 9px; color: var(--rose); opacity: .82; }
.bfg-ico-mail { width: 40px; height: 27px; border: 1px solid currentColor; border-radius: 5px; }
.bfg-ico-mail::before, .bfg-ico-mail::after {
    content: "";
    position: absolute;
    top: 3px;
    width: 22px;
    height: 1px;
    background: currentColor;
}
.bfg-ico-mail::before { left: 3px; transform: rotate(31deg); transform-origin: left center; }
.bfg-ico-mail::after { right: 3px; transform: rotate(-31deg); transform-origin: right center; }
.bfg-ico-paper {
    width: 26px;
    height: 28px;
    border: 1px solid currentColor;
    border-radius: 4px;
    background-image: linear-gradient(currentColor, currentColor), linear-gradient(currentColor, currentColor);
    background-size: 12px 1px, 12px 1px;
    background-position: 50% 13px, 50% 18px;
    background-repeat: no-repeat;
}
.bfg-ico-paper::after {
    content: "";
    position: absolute;
    right: -1px;
    top: -1px;
    width: 9px;
    height: 9px;
    border-left: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    border-bottom-left-radius: 4px;
    background: var(--surface-solid);          /* 折角 */
}
.bfg-ico-chat { width: 33px; height: 24px; border: 1px solid currentColor; border-radius: 9px; }
.bfg-ico-chat::after {
    content: "";
    position: absolute;
    left: 9px;
    bottom: -5px;
    width: 8px;
    height: 8px;
    border-left: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    background: var(--surface-solid);
    transform: rotate(-45deg);
    transform-origin: left bottom;
}

.bfg-title {
    font-family: var(--font-body);
    font-size: 17.5px;
    letter-spacing: .04em;
    line-height: 1.4;
    color: var(--text-primary);
    text-align: center;
}
.bfg-lead {
    margin: 8px 0 0 0;
    font-size: 13px;
    line-height: 1.72;
    letter-spacing: .01em;
    color: var(--rose);
    text-align: center;
}
.bfg-body {
    margin: 6px 0 0 0;
    font-size: 12.5px;
    line-height: 1.78;
    letter-spacing: .01em;
    color: var(--text-secondary, var(--text-muted));
    text-align: center;
}

/* 深色：主按钮换成暖金字的深底（浅粉底配白字在深色下看不清） */
[data-theme-mode="dark"] .bfg-go {
    background: #33271F;
    color: #EBD6AE;
    box-shadow: inset 0 0 0 1px rgba(201, 168, 168, .26), 0 4px 14px rgba(0, 0, 0, .34);
}
[data-theme-mode="dark"] .bfg-go:active { background: #3B2D24; }
[data-theme-mode="dark"] .bfg-go.is-last {
    box-shadow: inset 0 0 0 1px rgba(201, 168, 168, .32), 0 6px 20px rgba(201, 168, 168, .16);
}
[data-theme-mode="dark"] .bfg-veil { background: rgba(10, 8, 7, .58); }
[data-theme-mode="dark"] .bfg-ico { opacity: .9; }

.bfg-go {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100%;
    margin-top: 14px;
    padding: 11px 0;
    border: 0;
    border-radius: 999px;
    background: var(--rose);
    color: #fff;
    font-family: var(--font-body);
    font-size: 13.5px;
    letter-spacing: .06em;
    text-align: center;
    cursor: pointer;
    -webkit-appearance: none;
    transition: transform .18s ease, box-shadow .3s ease;
}
.bfg-go:active { transform: scale(.985); }
.bfg-go-ar {
    width: 6px;
    height: 6px;
    margin-left: -1px;
    border-top: 1.5px solid currentColor;
    border-right: 1.5px solid currentColor;
    transform: rotate(45deg);
}
/* 最后一步：按钮多一层柔光，箭头轻轻往前点一下（全卡只留这一处循环动画） */
.bfg-go.is-last { box-shadow: 0 6px 18px rgba(201, 168, 168, .38); }
.bfg-go.is-last .bfg-go-ar { animation: bfgNudge 1.7s ease-in-out infinite; }
@keyframes bfgNudge {
    0%, 100% { transform: rotate(45deg) translate(0, 0); }
    50% { transform: rotate(45deg) translate(2px, -2px); }
}

.bfg-dots { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 11px; }
.bfg-dots i {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--text-muted);
    opacity: .35;
    transition: opacity .24s ease, transform .32s cubic-bezier(.16, 1, .3, 1), background-color .24s ease;
}
.bfg-dots i.is-on { opacity: 1; background: var(--rose); transform: scale(1.45); }
.bfg-hint { margin-top: 8px; font-size: 10.5px; color: var(--text-muted); letter-spacing: .03em; text-align: center; }

/* ===== 指路：整屏压暗，只让意见箱那一行亮着
   光圈**先量好位置再亮起来**、之后挪动也有过渡 → 既不"跳"也不"闪" ===== */
.bfg-mask {
    position: absolute;
    inset: 0;
    z-index: 1725;
    opacity: 0;
    transition: opacity .3s ease;
    touch-action: none;              /* 拖动不穿透去滚底下的页面 → 光圈不会跟那一行错位 */
    overscroll-behavior: contain;
}
.bfg-mask.show { opacity: 1; }
.bfg-hole {
    position: absolute;
    border-radius: 22px;
    border: 2.5px solid var(--rose);
    box-shadow: 0 0 0 9999px rgba(18, 14, 12, .62);
    opacity: 0;
    transform: scale(.965);
    transition: opacity .32s ease, transform .48s cubic-bezier(.16, 1, .3, 1),
                left .22s ease, top .22s ease, width .22s ease, height .22s ease;
}
.bfg-hole.is-lit { opacity: 1; transform: none; }
/* 呼吸只动那圈光晕（transform + opacity），绝不再动画 9999px 的大阴影 —— 那是手机上"闪"和"卡"的来源 */
.bfg-hole.breathe::after {
    content: "";
    position: absolute;
    inset: -5px;
    border-radius: 26px;
    border: 1px solid rgba(201, 168, 168, .55);
    animation: bfgHalo 1.9s ease-out infinite;
    pointer-events: none;
}
@keyframes bfgHalo {
    0% { transform: scale(.98); opacity: 0; }
    45% { opacity: .75; }
    100% { transform: scale(1.05); opacity: 0; }
}
.bfg-tip {
    position: absolute;
    left: 50%;
    width: max-content;              /* 不给这句，绝对定位只按「半个屏」算可用宽度，副标题会被挤成两行 */
    max-width: 86%;
    padding: 10px 14px;
    border-radius: 14px;
    background: var(--surface-solid);
    color: var(--text-primary);
    box-shadow: var(--shadow-lg, 0 10px 30px rgba(0, 0, 0, .16));
    font-size: 13px;
    letter-spacing: .02em;
    text-align: center;
    opacity: 0;
    transform: translate(-50%, 8px);
    transition: opacity .34s ease, transform .48s cubic-bezier(.16, 1, .3, 1);
}
.bfg-tip.is-lit { opacity: 1; transform: translate(-50%, 0); }
/* 朝光圈那一边伸一只小角 —— 指路指得明白（气泡跑到下面来的时候小角自动翻到下方） */
.bfg-tip::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -4.5px;
    width: 10px;
    height: 10px;
    margin-left: -5px;
    background: var(--surface-solid);
    border-radius: 2px;
    transform: rotate(45deg);
}
.bfg-tip.is-above::before { top: auto; bottom: -4.5px; }
.bfg-tip span { display: block; margin-top: 3px; font-size: 11px; color: var(--text-muted); }
.bfg-skip {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(26px + var(--safe-bottom, 0px));
    text-align: center;
    font-size: 12px;
    letter-spacing: .05em;
    color: rgba(255, 255, 255, .72);
}

/* ===== 窄屏（<370px）===== */
@media (max-width: 369px) {
    .bfb-overlay { padding: 10px; }
    .bfb-panel { max-width: 100%; border-radius: 16px; }
    .bfb-head { padding: 12px 12px 9px 13px; }
    .bfb-tabs { margin: 10px 13px 0 13px; padding: 3px; gap: 2px; }
    .bfb-tab { padding: 7px 9px; }
    .bfb-tab-lb { font-size: 12.5px; }
    .bfb-body { padding: 9px 13px 4px 13px; }
    .bfb-foot { padding: 9px 13px calc(11px + var(--safe-bottom, 0px)) 13px; }
    .bfb-text { font-size: 13.5px; min-height: 84px; }
    .bfb-add-btn { font-size: 11.5px; }
}

/* ===== 大屏（>400px）稍微松一点，但绝不满屏 ===== */
@media (min-width: 401px) {
    .bfb-panel { max-width: 420px; }
    .bfb-text { min-height: 110px; }
}

/* ===== 「减少动态」：开合直接到位，不做位移与淡入（内容与可点区域完全不变）===== */
@media (prefers-reduced-motion: reduce) {
    .bfb-overlay, .bfb-panel, .bfg-gate, .bfg-card, .bfg-mask, .bfg-hole, .bfg-tip, .bfg-go,
    .bfg-step, .bfg-dots i,
    .bfb-tab, .bfb-chip, .bfb-close, .bfb-item-x, .bfb-add-btn, .bfb-send, .bfb-ex-line {
        transition: none;
        animation: none;
    }
    .bfb-panel { transform: none; }
    .bfg-card, .bfg-step, .bfg-hole { transform: none; }
    .bfg-tip { transform: translate(-50%, 0); }
    .bfg-hole.breathe::after, .bfg-go.is-last .bfg-go-ar { display: none; }
}