/* ============================================================
   css/chat/chat-kudos.css — 聊天里的「小红花庆祝」（KUDOS-07 R5）
   ------------------------------------------------------------
   它只负责「他这一轮真的贴了一朵花」那一下的环境与展开：
     中央花抵达 -> 落到真实那一条回复的位置 -> 同一朵花展开成纸 -> 暖黑 overlay -> 内容

   硬规则（R5 已解决过的问题，绝不许回退）：
     ① 庆祝层挂在本条真实回复的位置上，**不新建第二条 system 消息**；
     ② 花**真正落到位置之后**才固定，落点之前不许先在左下角出现第二朵花；
     ③ 花展开成纸时**不要折纸多边形桥**（KUDOS-04 的 paper-fold 桥已由 R5 移除）；
     ④ 关闭后不 scroll、不 reorder、不插入假消息，回到刚才的聊天位置；
     ⑤ 退场一律淡出 + 几何冻结，绝不用 instant display:none 当主退场；
     ⑥ prefers-reduced-motion：不做飞行与 3D 翻折，直接「花已就位 -> 纸 -> 内容」。

   花与纸的视觉**全部来自** css/panels/panels-kudos-flower.css 的 .kf-flower / .kf-paper
   （本文件不再画第二套花、也不另外画一张纸，只描述它们在这个场景里的位置与时序）。
   ============================================================ */

.kf-fx {
    position: absolute;
    inset: 0;
    z-index: 300;
    overflow: hidden;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.34s ease;
    contain: paint;
}
.kf-fx.is-on { opacity: 1; }

/* 环境：一层很薄的光，不是礼花 */
.kf-wash {
    position: absolute;
    inset: 0;
    z-index: 10;
    opacity: 0;
    background:
        radial-gradient(circle at 50% 42%, rgba(255, 252, 247, 0.3), transparent 30%),
        rgba(42, 34, 30, 0.05);
    transition: opacity 0.44s ease;
    pointer-events: none;
}
.kf-fx.is-on .kf-wash { opacity: 1; }

.kf-ribbon {
    position: absolute;
    top: -10%;
    width: 1px;
    height: 145px;
    border-radius: 999px;
    z-index: 10;
    opacity: 0;
    background: linear-gradient(180deg, rgba(198, 131, 125, 0.05), rgba(198, 131, 125, 0.46), rgba(198, 131, 125, 0.02));
    transform-origin: 50% 0;
    pointer-events: none;
}
.kf-fx.is-on .kf-ribbon { animation: kfRibbon 1.5s var(--kf-ease) forwards; }
.kf-ribbon.rr1 { left: 11%; --rot: -10deg; animation-delay: 0.06s; }
.kf-ribbon.rr2 { left: 27%; height: 105px; --rot: 9deg; animation-delay: 0.16s; }
.kf-ribbon.rr3 { left: 68%; height: 122px; --rot: -6deg; animation-delay: 0.1s; }
.kf-ribbon.rr4 { left: 86%; height: 96px; --rot: 12deg; animation-delay: 0.2s; }
.kf-ribbon.rr5 { left: 48%; height: 84px; --rot: -4deg; animation-delay: 0.03s; }
@keyframes kfRibbon {
    0% { opacity: 0; transform: rotate(var(--rot)) translateY(-14px); }
    24% { opacity: 0.62; }
    100% { opacity: 0; transform: rotate(var(--rot)) translateY(96px); }
}

.kf-rise {
    position: absolute;
    width: 5px;
    height: 9px;
    z-index: 10;
    opacity: 0;
    clip-path: polygon(50% 0, 92% 30%, 76% 100%, 50% 85%, 24% 100%, 8% 30%);
    background: linear-gradient(145deg, rgba(216, 154, 148, 0.9), rgba(184, 98, 95, 0.75));
    pointer-events: none;
}
.kf-fx.is-on .kf-rise { animation: kfRise 1.7s var(--kf-ease) forwards; }
.kf-rise.cp1 { left: 22%; bottom: 32%; --rot: -14deg; animation-delay: 0.05s; }
.kf-rise.cp2 { left: 62%; bottom: 27%; --rot: 11deg; animation-delay: 0.18s; }
.kf-rise.cp3 { left: 41%; bottom: 36%; --rot: 5deg; animation-delay: 0.12s; }
.kf-rise.cp4 { left: 79%; bottom: 41%; --rot: -8deg; animation-delay: 0.24s; }
.kf-rise.cp5 { left: 15%; bottom: 49%; --rot: 15deg; animation-delay: 0.3s; }
.kf-rise.cp6 { left: 53%; bottom: 20%; --rot: -3deg; animation-delay: 0.36s; }
@keyframes kfRise {
    0% { opacity: 0; transform: translateY(8px) rotate(var(--rot)) scale(0.7); }
    30% { opacity: 0.86; }
    100% { opacity: 0; transform: translateY(-118px) rotate(calc(var(--rot) + 26deg)) scale(1); }
}

.kf-flare {
    position: absolute;
    left: 50%;
    top: 45%;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    z-index: 10;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.55);
    background: radial-gradient(circle, rgba(255, 248, 243, 0.72), rgba(226, 181, 175, 0.16) 38%, transparent 70%);
    pointer-events: none;
}
.kf-fx.is-on .kf-flare { animation: kfFlare 0.72s ease-out forwards; }
@keyframes kfFlare {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
    25% { opacity: 0.6; }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1.28); }
}

/* 这一朵花：飞行用 translate（合成层），落位后把落点写进 left/top（它与框一致，不会跳） */
.kf-fx[data-variant="chat"] .kf-hero{
    position: absolute;
    left: 50%;
    top: 46%;
    z-index: 30;
    width: 58px;
    height: 58px;
    transform: translate(-50%, -50%) translate(var(--dx, 0px), var(--dy, 0px));
    transform-style: preserve-3d;
    pointer-events: none;
    will-change: transform;
}
.kf-fx.is-on[data-variant="chat"] .kf-hero{
    transition: transform 0.76s var(--kf-ease);
}
.kf-fx[data-variant="chat"] .kf-hero .kf-flower{
    position: absolute;
    inset: 0;
    left: auto;
    top: auto;
    width: 100%;
    height: 100%;
    translate: 0 0;
    --s: 1;
}
.kf-fx.is-on[data-variant="chat"] .kf-hero{
    transform: translate(-50%, -50%) translate(var(--dx, 0px), var(--dy, 0px)) scale(0.86);
}
.kf-fx.is-on[data-variant="chat"] .kf-hero .kf-flower{
    transform: rotate(var(--rz, -6deg)) rotateX(var(--rx, 6deg)) rotateY(var(--ry, -4deg)) scale(1.02);
    transition: transform 0.52s var(--kf-ease);
}
.kf-fx.is-on[data-variant="chat"] .kf-hero .kf-flower .kf-flower-edge{
    opacity: 0.72;
    transition: opacity 0.4s ease;
}
.kf-fx.is-on[data-variant="chat"] .kf-hero .kf-flower .kf-center, 
.kf-fx.is-on[data-variant="chat"] .kf-hero .kf-flower .kf-center-edge{
    opacity: 0.92;
    transition: opacity 0.4s ease;
}

/* 展开：同一朵花，逐瓣翻过去（KUDOS-04 的错峰），随后中心淡出。
   黑板那一份的同一段规则搬去了 css/panels/panels-kudos-flower.css ——
   两个变体各写在自己那份样式里，谁都不许跨到对方文件里改（TASK-KUDOS-FLOWER-002）。 */
.kf-fx[data-variant="chat"] .kf-hero .kf-flower .kf-petal{
    transition: transform 0.56s var(--kf-ease), opacity 0.42s ease;
    transform: translate(-50%, -101%) rotate(var(--rot)) rotateX(82deg) translateZ(-4px) translateY(7px) scale(0.76, 0.62);
    opacity: 0.16;
}
.kf-fx.is-on[data-variant="chat"] .kf-hero .kf-flower .p1{ transition-delay: 0.11s; }
.kf-fx.is-on[data-variant="chat"] .kf-hero .kf-flower .p2{ transition-delay: 0.145s; }
.kf-fx.is-on[data-variant="chat"] .kf-hero .kf-flower .p3{ transition-delay: 0.18s; }
.kf-fx.is-on[data-variant="chat"] .kf-hero .kf-flower .p4{ transition-delay: 0.215s; }
.kf-fx.is-on[data-variant="chat"] .kf-hero .kf-flower .p5{ transition-delay: 0.25s; }
.kf-fx.is-on[data-variant="chat"] .kf-hero .kf-flower .p6{ transition-delay: 0.285s; }
.kf-fx.is-on[data-variant="chat"] .kf-hero .kf-flower .kf-flower-edge{
    opacity: 0;
    transition: opacity 0.44s ease 0.22s;
}
.kf-fx.is-on[data-variant="chat"] .kf-hero .kf-flower .kf-center-edge{
    opacity: 0;
    transition: opacity 0.36s ease 0.3s;
}
.kf-fx.is-on[data-variant="chat"] .kf-hero .kf-flower .kf-center{
    opacity: 0.08;
    transform: translate(-50%, -50%) scale(0.66);
    transition: opacity 0.36s ease 0.3s, transform 0.42s var(--kf-ease) 0.3s;
}
/* 纸已经接上了，环境装饰让位 */
.kf-fx.is-paper-open .kf-wash,
.kf-fx.is-paper-open .kf-ribbon,
.kf-fx.is-paper-open .kf-rise,
.kf-fx.is-paper-open .kf-flare {
    opacity: 0;
    animation: none;
}

/* 暖黑 overlay：纸在它上面 */
.kf-dim {
    position: absolute;
    inset: 0;
    z-index: 400;
    opacity: 0;
    pointer-events: none;
    background: rgba(39, 34, 30, 0.46);
    transition: opacity 0.42s ease;
}
.kf-fx.is-paper .kf-dim {
    opacity: 1;
    pointer-events: auto;
}
.kf-fx.is-closing .kf-dim {
    opacity: 0;
    transition-delay: 0.76s;
}

/* ------------------------------------------------------------
   纸：从这一朵花的位置长出来（同一物体展开，不是弹出第二张卡）
   ------------------------------------------------------------ */
.kf-paper-host {
    position: absolute;
    /* 必须高于暖黑 overlay（400）：纸是躺在暖黑上面的那一张 */
    z-index: 500;
}
/* 这一整个庆祝层（含那张纸）都必须挂在自己的作用域里：只认它自己的
   data-variant="chat"。黑板上的那朵花用的是同一套 .kf-paper 外观，
   而黑板的承载元素**也**带 .kf-fx —— 一旦这些版式规则写成全局（固定尺寸的
   .kf-sheet + 绝对定位的正文），黑板上的纸就会被套进「花那么大的一个盒子」：
   实测纸被压成 175×53、正文被整段裁掉。
   所以：这一层只认自己的 data-variant，黑板那一份的版式写在黑板的样式文件里。
   这一层里 .kf-sheet 是「那朵花」，纸是它里面被撑开的一层：纸写满整个 sheet
   （不是靠内容撑高——它的正文是绝对定位的），几何完全由 sheet 说了算。 */
.kf-fx[data-variant="chat"] .kf-sheet > .kf-paper {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-height: none;
    padding: 0;
}
.kf-fx[data-variant="chat"] .kf-sheet{
    position: absolute;
    left: 0;
    top: 0;
    width: 27px;
    height: 34px;
    padding: 0;
    border: 1px solid rgba(127, 94, 76, 0.1);
    border-radius: 9px;
    overflow: hidden;
    isolation: isolate;
    opacity: 0;
    color: var(--kf-ink);
    background: linear-gradient(145deg, var(--kf-paper-red) 0%, #fffaf3 100%);
    transform: translate(-50%, -50%) rotate(-7deg) rotateY(62deg) scale(0.72);
    transform-origin: 50% 50%;
    transform-style: preserve-3d;
    clip-path: polygon(16% 9%, 84% 0%, 100% 36%, 78% 100%, 20% 92%, 0 42%);
    box-shadow:
        0 22px 38px rgba(83, 62, 50, 0.16),
        0 7px 13px rgba(83, 62, 50, 0.08),
        0 1px 0 rgba(255, 255, 255, 0.9) inset;
    will-change: width, height, transform, clip-path, opacity;
    transition:
        width 0.68s var(--kf-ease),
        height 0.68s var(--kf-ease),
        left 0.68s var(--kf-ease),
        top 0.68s var(--kf-ease),
        transform 0.76s var(--kf-ease),
        clip-path 0.62s var(--kf-ease),
        opacity 0.24s ease;
}
.kf-fx[data-variant="chat"] .kf-sheet::before{
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.42;
    background:
        repeating-linear-gradient(8deg, rgba(95, 70, 54, 0.032) 0 1px, transparent 1px 5px),
        repeating-linear-gradient(94deg, rgba(255, 255, 255, 0.18) 0 1px, transparent 1px 8px),
        radial-gradient(circle at 42% 46%, rgba(255, 255, 255, 0.42), transparent 34%);
    mix-blend-mode: multiply;
    pointer-events: none;
}
.kf-fx[data-variant="chat"] .kf-sheet::after{
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 41px;
    height: 41px;
    background: linear-gradient(225deg, rgba(255, 255, 255, 0.85), rgba(242, 225, 211, 0.42) 56%, transparent 57%);
    clip-path: polygon(100% 0, 100% 100%, 0 0);
    opacity: 0.65;
    pointer-events: none;
}

/* 纸已经成形：尺寸 / 几何 / 纸纹全部落定（内容在 0.9s 后抵达） */
.kf-fx.is-paper[data-variant="chat"] .kf-sheet{
    width: min(276px, calc(100% - 44px));
    height: min(378px, calc(100% - 96px));
    opacity: 1;
    transform: translate(-50%, -50%) rotate(-0.7deg) rotateY(0deg) scale(1);
    background:
        radial-gradient(ellipse at 18% 8%, rgba(255, 255, 255, 0.93), transparent 22%),
        radial-gradient(ellipse at 86% 92%, rgba(160, 116, 92, 0.065), transparent 25%),
        linear-gradient(141deg, #fffaf3 0%, #fffaf3 63%, #f1e4d8 100%);
    clip-path: polygon(
        1.2% 0.8%, 99.1% 1.2%, 98.8% 18%,
        100% 38%, 98.9% 61%, 99.2% 98.7%,
        76% 99.4%, 51% 98.8%, 27% 99.6%,
        2% 98.4%, 0.7% 73%, 1.4% 47%, 0.4% 22%
    );
}
.kf-fx[data-variant="chat"] .kf-sheet .kf-paper-body{
    position: absolute;
    inset: 26px 22px 24px;
    z-index: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.5s ease, transform 0.38s var(--kf-ease);
}
.kf-fx.is-on[data-variant="chat"] .kf-sheet .kf-paper-body{
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.9s;
}
.kf-fx[data-variant="chat"] .kf-sheet .kf-paper-seal{
    margin-top: auto;
    margin-bottom: 0;
}

/* 收回：内容先走 -> 纸只变透明（几何冻结）-> 花在原来的落点重新长回来 */
.kf-fx.is-on[data-variant="chat"] .kf-sheet .kf-paper-body{
    opacity: 0;
    transform: translateY(4px);
    transition-delay: 0ms;
}
.kf-fx.is-closing[data-variant="chat"] .kf-sheet{
    opacity: 0;
    transition: opacity 0.42s ease 0.22s;
}
.kf-fx.is-on[data-variant="chat"] .kf-hero .kf-flower .kf-petal{
    transition: transform 0.52s var(--kf-ease), opacity 0.38s ease;
    transform: translate(-50%, -100%) rotate(var(--rot)) rotateX(0deg) translateZ(0) translateY(0) scale(1);
    opacity: 1;
}
.kf-fx.is-on[data-variant="chat"] .kf-hero .kf-flower .p1{ transition-delay: 0.5s; }
.kf-fx.is-on[data-variant="chat"] .kf-hero .kf-flower .p2{ transition-delay: 0.525s; }
.kf-fx.is-on[data-variant="chat"] .kf-hero .kf-flower .p3{ transition-delay: 0.55s; }
.kf-fx.is-on[data-variant="chat"] .kf-hero .kf-flower .p4{ transition-delay: 0.575s; }
.kf-fx.is-on[data-variant="chat"] .kf-hero .kf-flower .p5{ transition-delay: 0.6s; }
.kf-fx.is-on[data-variant="chat"] .kf-hero .kf-flower .p6{ transition-delay: 0.625s; }
.kf-fx.is-on[data-variant="chat"] .kf-hero .kf-flower .kf-flower-edge{
    opacity: 1;
    transition: opacity 0.36s ease 0.5s;
}
.kf-fx.is-on[data-variant="chat"] .kf-hero .kf-flower .kf-center-edge, 
.kf-fx.is-on[data-variant="chat"] .kf-hero .kf-flower .kf-center{
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    transition: opacity 0.28s ease 0.76s, transform 0.42s var(--kf-ease) 0.76s;
}
.kf-fx.is-closing .kf-wash,
.kf-fx.is-closing .kf-flare {
    opacity: 0;
    animation: none;
}

/* 纸开着的时候，花这一层不许抢指针；关掉后它就不再拦任何触摸 */
.kf-fx.is-on[data-variant="chat"] .kf-hero, 
.kf-fx.is-on[data-variant="chat"] .kf-hero{ pointer-events: none; }

/* ------------------------------------------------------------
   窄屏（<370）与减少动效
   ------------------------------------------------------------ */
@media (max-width: 374px) {
.kf-fx[data-variant="chat"] .kf-hero{ width: 54px; height: 54px; }
.kf-fx.is-paper[data-variant="chat"] .kf-sheet{
        width: calc(100% - 36px);
        height: calc(100% - 84px);
    }
.kf-fx[data-variant="chat"] .kf-sheet .kf-paper-body{ inset: 22px 19px 20px; }
}
@media (prefers-reduced-motion: reduce) {
    .kf-fx,
    .kf-wash,
    .kf-dim,
.kf-fx[data-variant="chat"] .kf-hero, 
.kf-fx[data-variant="chat"] .kf-hero .kf-flower, 
.kf-fx[data-variant="chat"] .kf-hero .kf-flower .kf-petal, 
.kf-fx[data-variant="chat"] .kf-sheet, 
.kf-fx[data-variant="chat"] .kf-sheet .kf-paper-body{
        transition: none;
    }
    .kf-fx.is-on .kf-ribbon,
    .kf-fx.is-on .kf-rise,
    .kf-fx.is-on .kf-flare { animation: none; opacity: 0; }
.kf-fx.is-on[data-variant="chat"] .kf-hero, 
.kf-fx.is-on[data-variant="chat"] .kf-hero{
        transform: translate(-50%, -50%) translate(var(--dx, 0px), var(--dy, 0px)) scale(0.86);
    }
.kf-fx.is-on[data-variant="chat"] .kf-sheet .kf-paper-body{ transition-delay: 0ms; }
}

/* ============================================================
   KUDOS-07 R5 · 聊天里的那张夸夸卡（TASK-KUDOS-FLOWER-002）
   ------------------------------------------------------------
   它挂在他那条真实回复上（同一个 .bubble-wrap 里、气泡下面），**不是**一条新消息：
   所以它长得像一小张便签，安静地跟在那句话下面，而不是另起一行对话。
   版式来源：docs/design/kudos/KSTAR-KUDOS-07-chat-celebration-preview-R5.html（逐条搬过来）。
   ============================================================ */
.kf-bubble-card{
    position:relative;
    display:block;
    width:min(278px, calc(100vw - 88px));
    /* 与上方那条气泡之间留够「一条安静的空隙」：右上角那朵花是**压在卡片角上**的
       （它自己会转一点角度，视觉边界比盒子大），所以卡与气泡之间必须有富余，
       不能让花顶到上面那句话的最后一个字上（Review 要求：card.top ≥ 气泡底 + 安全间距）。 */
    /* 卡片可能被塞进一个 flex 行里（老写法 `.msg > .bubble`，没有 .bubble-wrap 那一层，
       那种形状下它与气泡是**并排**的两个 flex 项）：钉住它自己的宽度，避免被 flex 压成
       197px、文案折两行、卡变 207px 高（花的角也跟着被挤）。父容器装不下就让它溢出。 */
    flex:0 0 auto;
    margin:14px 0 2px;
    /* 下内边距比上内边距少 2px 的理由：卡比原来高了 6px，减掉这 2px 让它仍然落在
       148px 那一档（R5 的尺度感不许动），同时花的上沿仍在卡片之内。 */
    padding:15px 54px 11px 16px;
    border:1px solid rgba(139,111,94,.17);
    border-radius:21px 21px 19px 5px;
    text-align:left;
    color:#4b4038;
    cursor:pointer;
    overflow:visible;
    background:
        radial-gradient(circle at 88% 5%,rgba(255,255,255,.94),transparent 24%),
        radial-gradient(circle at 8% 93%,rgba(201,168,168,.09),transparent 26%),
        linear-gradient(146deg,#fffbf6 0%,#f7f0e8 100%);
    box-shadow:
        0 1px 0 rgba(255,255,255,.94) inset,
        0 10px 26px rgba(73,62,54,.075),
        0 2px 5px rgba(73,62,54,.045),
        2px 3px 0 rgba(184,154,110,.045);
    /* 入场：先透明（DOM 已插入），下一帧才加 .is-on —— 两拍，防闪 */
    opacity:0;
    transform:translateY(10px);
    pointer-events:none;
    -webkit-tap-highlight-color:transparent;
    font:inherit;
}
.kf-bubble-card.is-on{
    opacity:1;
    transform:none;
    pointer-events:auto;
    transition:opacity .34s ease, transform .34s cubic-bezier(.22,.9,.28,1);
}
.kf-bubble-card:active{ transform:scale(.985); }
.kf-bubble-card::before{
    content:"";position:absolute;inset:1px;border-radius:20px 20px 18px 4px;
    background:
        repeating-linear-gradient(7deg,rgba(83,67,53,.020) 0 1px,transparent 1px 6px),
        repeating-linear-gradient(97deg,rgba(255,255,255,.15) 0 1px,transparent 1px 8px);
    opacity:.78;pointer-events:none;
}
.kf-bubble-card::after{
    content:"";position:absolute;left:15px;right:56px;top:13px;height:1px;
    background:linear-gradient(90deg,rgba(184,154,110,.44),rgba(184,154,110,.08),transparent);
    pointer-events:none;
}
.kf-bc-eyebrow{
    position:relative;display:block;margin:0 0 8px;
    font:italic 10px/1 var(--display, Georgia, serif);
    letter-spacing:.16em;color:#ad907b;
}
.kf-bc-label{
    position:relative;margin:0 0 8px;padding-left:13px;
    font-size:13.5px;line-height:1.52;color:#34322d;
    font-weight:500;letter-spacing:.015em;
}
.kf-bc-label::before{
    content:"";position:absolute;left:0;top:.72em;width:5px;height:5px;
    border-radius:50%;background:#B89A6E;
    box-shadow:0 0 0 3px rgba(184,154,110,.10);
}
.kf-bc-reason{
    position:relative;margin:0;max-width:204px;
    color:#544840;font-size:13.2px;line-height:1.9;
    display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.kf-bc-rule{
    position:relative;width:58px;height:1px;margin:11px 0 9px;
    background:linear-gradient(90deg,#b8625f,rgba(184,154,110,.45),transparent);
    opacity:.66;
}
.kf-bc-branch{
    position:relative;display:flex;align-items:center;gap:7px;margin-top:10px;
    padding-top:8px;border-top:1px solid rgba(139,111,94,.10);
    color:#a1846c;font-size:9px;letter-spacing:.045em;
}
.kf-bc-branch::before{
    content:"";width:20px;height:1px;
    background:linear-gradient(90deg,#B89A6E,rgba(184,154,110,0));
}
.kf-bc-corner{
    position:absolute;top:-1px;right:-1px;width:34px;height:34px;
    background:linear-gradient(225deg,rgba(255,255,255,.95),rgba(242,225,211,.62) 55%,transparent 56%);
    clip-path:polygon(100% 0,100% 100%,0 0);
    opacity:.72;pointer-events:none;
}
.kf-bc-corner::after{
    content:"";position:absolute;right:4px;top:7px;width:20px;height:1px;
    background:rgba(165,132,108,.28);transform:rotate(-45deg);
}
.kf-bc-botanical{
    position:absolute;right:2px;bottom:7px;width:44px;height:24px;
    opacity:.54;transform:rotate(-4deg);
    pointer-events:none;
}
.kf-bc-botanical path{
    fill:none;stroke:#B89A6E;stroke-width:1.15;
    stroke-linecap:round;stroke-linejoin:round;
}
.kf-bc-botanical .kf-bc-petal{ fill:#d7aaa4;stroke:none }
.kf-bc-botanical .kf-bc-center{ fill:#B89A6E;stroke:none }
.kf-bc-flower{
    /* 花的盒子（34×34）整个落在卡片之内：它自己还带一点旋转，视觉边界会略大于盒子，
       所以盒子四边都留了富余（右 12 / 上 17 → 视觉上仍然压在右上角，但不会顶出卡片）。 */
    position:absolute;right:12px;top:17px;width:34px;height:34px;
    pointer-events:none;
}
@media (prefers-reduced-motion: reduce){
    .kf-bubble-card{ transform:none; }
    .kf-bubble-card.is-on{ transition:none; }
}