/* 弹幕：danmaku.js 那一层（飘的字）+ danmaku-v3.js 的两颗按钮和「在这一刻留一句」。颜色、字体、圆角只用设计令牌（design/fable/tokens.css）。
   层叠：飘的字在画框（#fable-frame）里 z-index 9：盖在立绘、特效层（7）上面，字幕（12）、卡片流（14）、头像栏和底栏（15）、顶上那几排（17–21）下面。
   层本身点不着（pointer-events:none），飘到哪儿都挡不着按钮；飘在哪条空地由 danmaku-v3.js 的 band() 算，不压脸、字幕、卡片流、按钮。 */

/* ══ 飘的字 ══ */
.fbdm-layer {position:absolute;left:0;top:0;z-index:9;overflow:hidden;pointer-events:none;user-select:none;-webkit-user-select:none;contain:layout paint style}
.fbdm-layer[hidden] {display:none}
.fbdm-item {position:absolute;left:0;top:0;display:inline-flex;align-items:center;gap:.3em;height:var(--fbdm-lane,26px);padding:0 .1em;white-space:nowrap;
 color:var(--fb-ink);font:700 var(--fbdm-font,16px)/var(--fbdm-lane,26px) var(--font-body);letter-spacing:.02em;
 text-shadow:0 0 2px var(--fb-night-deep),0 0 2px var(--fb-night-deep),0 1px 3px var(--fb-night-deep);will-change:transform;backface-visibility:hidden}
/* 自己留的：公开的实线框，只给自己的虚线框（跟 B 站一样一眼认得出哪条是自己的） */
.fbdm-item.is-mine {top:2px;height:calc(var(--fbdm-lane,26px) - 4px);line-height:calc(var(--fbdm-lane,26px) - 4px);padding:0 .35em;border-radius:4px;box-shadow:inset 0 0 0 1.5px var(--fb-neon-green)}
.fbdm-item.is-self {box-shadow:none;outline:1.5px dashed var(--fb-neon-green);outline-offset:-1.5px;color:var(--fb-ink-2)}
/* 艺人看片时的反应（看片会那边写进来）：带头像、金字 */
.fbdm-item.is-idol {color:var(--fb-gold)}
.fbdm-item img {flex:none;width:1.15em;height:1.15em;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1.5px var(--fb-night-deep)}

/* ══ 两颗按钮：「弹幕」开关、「发弹幕」 ══ 样子照卡片流顶上 想 / 说 / 做 那排 */
.fbdm-tools {flex:none;display:inline-flex;align-items:center;gap:4px}
.reel__head .fbdm-tools {padding-left:8px;border-left:1px solid var(--fb-line)}
/* 往上翻着回看（body.reel-browse）：那一行要放「回到刚才」，弹幕两颗先收起（手机上原来挤出屏、压着「吵」那条）。
   留言挂的是正在演的这一刻，不是翻到的那张；点「回到刚才」或接着演就回来 */
body.reel-browse .reel__head .fbdm-tools {display:none}
.fbdm-tools .fbdm-toggle,.fbdm-tools .fbdm-send {position:relative;display:inline-grid;place-items:center;min-width:34px;height:26px;margin:0;padding:0 9px;border-radius:5px;border:1px solid var(--fb-line-strong);
 background:rgba(10,13,15,.84);color:var(--fb-ink);font:700 12px/1 var(--font-body);white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;
 transition:background var(--fb-dur-state),color var(--fb-dur-state),border-color var(--fb-dur-state)}
.fbdm-tools .fbdm-toggle::before,.fbdm-tools .fbdm-send::before {content:"";position:absolute;inset:-9px -2px} /* 点的地方比看着大一圈（跟想说做一样） */
.fbdm-tools .fbdm-toggle[aria-pressed="false"] {color:var(--fb-ink-off);border-style:dashed;border-color:var(--fb-line);text-decoration:line-through}
.fbdm-tools .fbdm-send {border-color:var(--fb-neon-green);color:var(--fb-neon-green)}
.fbdm-tools .fbdm-send[aria-expanded="true"] {background:var(--fb-neon-green);color:var(--fb-on-green)}
.fbdm-tools button:focus-visible {outline:none;box-shadow:var(--fb-ring-focus)}
@media (hover:hover) {
 .fbdm-tools .fbdm-toggle:hover {border-color:var(--fb-ink-3)}
 .fbdm-tools .fbdm-send:hover {background:var(--fb-green-tint)}
 .fbdm-tools .fbdm-send[aria-expanded="true"]:hover {background:var(--fb-neon-green)}
}
/* 卡片流关着（电脑上）：放进底栏「倍速」前面，跟底栏的键一样高 */
.dock .fbdm-tools {margin-right:6px}
.dock .fbdm-tools .fbdm-toggle,.dock .fbdm-tools .fbdm-send {height:32px;padding:0 11px;font-size:13px}

/* ══ 在这一刻留一句 ══ 电脑：贴在「发弹幕」下面的小卡；手机、横屏：从底下升起来的抽屉（跟登录那一块同一种） */
.fbdm-compose {position:fixed;z-index:9000;box-sizing:border-box;width:min(360px,calc(100vw - 16px));display:grid;gap:10px;padding:14px 14px 12px;
 border:1px solid var(--fb-line-strong);border-radius:var(--fb-radius-lg);background:var(--fb-surface-1);color:var(--fb-ink);font-family:var(--font-body);box-shadow:var(--fb-shadow-pop)}
.fbdm-compose[hidden] {display:none}
.fbdm-compose *,.fbdm-compose *::before {box-sizing:border-box}
.fbdm-compose button {font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.fbdm-compose__head {display:flex;align-items:center;gap:8px;min-width:0}
.fbdm-compose__head b {flex:none;font:400 20px/26px var(--font-display);letter-spacing:.04em}
.fbdm-when {min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--fb-ink-3);font-size:12.5px;line-height:18px}
.fbdm-x {flex:none;display:grid;place-items:center;width:32px;height:32px;margin:-4px -6px -4px auto;padding:0;border:0;border-radius:50%;background:none;color:var(--fb-ink-2);font-size:22px!important;line-height:1}
.fbdm-field {display:flex;align-items:center;gap:8px;height:44px;padding:0 10px 0 12px;border:1px solid var(--fb-line-strong);border-radius:var(--fb-radius-md);background:var(--fb-night-deep)}
.fbdm-field:focus-within {border-color:var(--fb-neon-cyan)}
.fbdm-field input {flex:1;min-width:0;height:100%;margin:0;padding:0;border:0;outline:0;background:none;color:var(--fb-ink);font:500 16px/1 var(--font-body)} /* 16px：手机上点进去不放大页面 */
.fbdm-field input::placeholder {color:var(--fb-ink-off)}
.fbdm-count {flex:none;color:var(--fb-ink-3);font:400 12px/1 var(--font-body);font-variant-numeric:tabular-nums}
.fbdm-count.is-over {color:var(--fb-danger)}
.fbdm-vis {display:grid;grid-template-columns:1fr 1fr;gap:8px}
.fbdm-opt {position:relative;display:grid;gap:3px;align-content:start;margin:0;padding:9px 10px 10px 30px;text-align:left;border:1px solid var(--fb-line);border-radius:var(--fb-radius-md);background:var(--fb-surface-2);color:var(--fb-ink-2)}
.fbdm-opt::before {content:"";position:absolute;left:10px;top:12px;width:12px;height:12px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--fb-line-strong)}
.fbdm-opt b {font:700 14px/18px var(--font-body);color:var(--fb-ink)}
.fbdm-opt small {font-size:12px;line-height:17px;color:var(--fb-ink-3)}
.fbdm-opt[aria-checked="true"] {border-color:var(--fb-neon-green);background:var(--fb-green-tint)}
.fbdm-opt[aria-checked="true"]::before {box-shadow:inset 0 0 0 1.5px var(--fb-neon-green),inset 0 0 0 4px var(--fb-green-tint);background:var(--fb-neon-green)}
.fbdm-note {margin:0;color:var(--fb-ink-2);font-size:12.5px;line-height:19px}
.fbdm-note:empty {display:none}
.fbdm-note.is-bad {color:var(--fb-danger)}
.fbdm-compose__foot {display:flex;justify-content:flex-end;gap:8px}
.fbdm-compose :focus-visible {outline:2px solid var(--fb-neon-cyan);outline-offset:2px}
.fbdm-compose.is-sheet {left:0!important;right:0!important;top:auto!important;width:auto;max-height:82dvh;overflow:auto;overscroll-behavior:contain;padding:8px 16px calc(14px + env(safe-area-inset-bottom));
 border-width:1px 0 0;border-radius:18px 18px 0 0;box-shadow:0 -20px 60px rgba(0,0,0,.6)}
.fbdm-compose.is-sheet::before {content:"";display:block;width:40px;height:4px;margin:0 auto;border-radius:2px;background:var(--fb-line-strong)}
.fbdm-compose.is-sheet .fbdm-compose__foot .fb-btn {flex:1}
/* 横屏：矮，两个选项收成一行字 */
@media (max-height:520px) {
 .fbdm-compose.is-sheet {gap:8px;padding-top:6px}
 .fbdm-compose.is-sheet .fbdm-opt {padding:7px 10px 7px 30px}
 .fbdm-compose.is-sheet .fbdm-opt::before {top:10px}
 .fbdm-compose.is-sheet .fbdm-opt small {display:none}
}
@media (prefers-reduced-motion:reduce) {
 .fbdm-tools .fbdm-toggle,.fbdm-tools .fbdm-send {transition:none}
}