/* FAQ reader feedback and approved danmaku */
.faq-feedback { padding-top: 30px; }
.faq-feedback-head { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:22px; }
.faq-feedback-head h2 { margin:8px 0 8px; }
.faq-feedback-head .lede { max-width:620px; margin:0; }
.faq-admin-toggle { flex:0 0 auto; }
.faq-feedback-form, .faq-admin, .faq-danmaku { background:#fff; border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow); }
.faq-feedback-form { display:grid; grid-template-columns:minmax(150px,.35fr) minmax(260px,1fr) auto; grid-template-rows:minmax(0,1fr); gap:16px; padding:20px; align-items:stretch; }
.faq-feedback-identity { display:grid; align-content:start; gap:16px; }
.faq-feedback-form label.faq-feedback-message { align-self:stretch; display:flex; flex-direction:column; height:100%; min-height:0; box-sizing:border-box; }
.faq-feedback-form label { display:block; position:relative; }
.faq-feedback-form label > span { display:block; margin:0 0 8px; color:var(--ink-2); font-size:.9rem; font-weight:600; }
.faq-feedback-form em { color:var(--ink-3); font-style:normal; font-weight:400; }
.faq-feedback-form strong { color:var(--brand-bright); }
.faq-feedback-form input, .faq-feedback-form textarea { width:100%; box-sizing:border-box; border:1px solid var(--line); border-radius:12px; background:#fafafa; color:var(--ink); padding:11px 13px; font:inherit; outline:none; }
.faq-feedback-form input:focus, .faq-feedback-form textarea:focus { border-color:var(--brand); box-shadow:0 0 0 3px rgba(255,106,0,.15); }
.faq-feedback-form textarea { min-height:0; flex:1 1 auto; resize:vertical; }
.faq-feedback-message small { position:absolute; right:12px; bottom:10px; color:var(--ink-3); }
.faq-feedback-actions { grid-column:3; display:flex; flex-direction:column; align-items:flex-end; justify-content:flex-end; gap:10px; align-self:end; }
.faq-feedback-status { min-height:1.25em; color:var(--brand-deep); font-size:.86rem; white-space:nowrap; }
.faq-admin { margin-top:16px; padding:18px; }
.faq-admin-bar { display:flex; justify-content:space-between; align-items:center; padding-bottom:12px; border-bottom:1px solid var(--line-2); }
.faq-admin-bar strong { font-size:1.05rem; }
.faq-admin-bar span { color:var(--ink-3); font-size:.85rem; margin-left:8px; }
.faq-admin-close { border:0; background:transparent; color:var(--ink-2); font-size:1.6rem; line-height:1; cursor:pointer; }
.faq-admin-list { display:grid; gap:10px; margin-top:12px; }
.faq-admin-item { border:1px solid var(--line-2); border-radius:13px; padding:13px 15px; background:#fafafa; }
.faq-admin-item.is-approved { border-color:var(--brand-soft); }
.faq-admin-item > div:first-child { display:flex; gap:8px; align-items:baseline; }
.faq-admin-item time { color:var(--ink-3); font-size:.78rem; }
.faq-admin-contact { color:var(--ink-3); font-size:.84rem; margin-top:5px; overflow-wrap:anywhere; }
.faq-admin-item p { margin:7px 0 12px; color:var(--ink-2); white-space:pre-wrap; overflow-wrap:anywhere; }
.faq-admin-item-actions { display:flex; gap:10px; align-items:center; }
.faq-admin-item-actions button { border:0; background:var(--brand); color:#fff; padding:7px 11px; border-radius:8px; font:inherit; cursor:pointer; }
.faq-admin-item-actions button.is-muted { background:transparent; color:var(--ink-3); padding-inline:4px; }
.faq-admin-approved { color:var(--brand-deep); font-size:.85rem; }
.faq-admin-empty { color:var(--ink-3); margin:6px 0 0; }
.faq-danmaku { margin-top:22px; overflow:hidden; }
.faq-danmaku-title { display:flex; justify-content:space-between; align-items:baseline; gap:12px; padding:16px 20px 13px; border-bottom:1px solid var(--line-2); }
.faq-danmaku-title span { font-weight:700; }
.faq-danmaku-title small { color:var(--ink-3); }
.faq-danmaku-stage { min-height:190px; position:relative; overflow:hidden; padding:12px 0; background:var(--brand-wash); }
/* 每条弹幕是独立元素：位置、速度、方向都由 faq-feedback.js 逐条随机，
   不再有"整行等速滚动"的 lane。这里只给绝对定位和单行排版的底子，
   line-height 24px 是 JS 算车道时用的同一个高度，改这里要同步改 JS。 */
/* 两条弹幕重叠时，靠这圈与 stage 底色同色的 text-shadow 把前面的字"垫"出来，
   否则两条灰字压在一起会糊成一片。 */
.faq-danmaku-item { position:absolute; left:0; top:0; line-height:24px; color:var(--ink-2); font-size:.95rem; white-space:nowrap; will-change:transform; text-shadow:0 0 5px var(--brand-wash), 0 0 2px var(--brand-wash); }
.faq-danmaku-item::before { content:'✦'; color:var(--brand); margin-right:9px; }
.faq-danmaku-static { display:flex; flex-wrap:wrap; justify-content:center; align-content:center; gap:10px 22px; padding:24px 20px; min-height:166px; }
.faq-danmaku-static .faq-danmaku-item { position:static; will-change:auto; }
.faq-danmaku-empty { color:var(--ink-3); text-align:center; padding:62px 20px; margin:0; }
@media (max-width:760px) { .faq-feedback-head { align-items:flex-start; flex-direction:column; } .faq-feedback-form { grid-template-columns:1fr; grid-template-rows:auto; } .faq-feedback-form label.faq-feedback-message { height:auto; min-height:0; } .faq-feedback-form textarea { min-height:120px; height:auto; } .faq-feedback-actions { align-items:stretch; } .faq-feedback-status { white-space:normal; } .faq-danmaku-title { flex-direction:column; gap:3px; } }