/* 单题留言 + 弹幕（119-question-comments.js）。
 * 配色对齐做题页 focus-vega 皮肤：白卡片、zinc 中性色、紫色主色（--learn-*，带回退值）。
 * 只改视觉属性，不改任何结构选择器（JS markup 与成绩单报告页依赖）。 */

.q-comments {
  margin: 10px 0 2px;
  padding: 12px 14px 14px;
  background: var(--learn-card, #fff);
  border: 1px solid var(--learn-border, #e4e4e7);
  border-radius: var(--learn-radius-panel, 10px);
  box-shadow: 0 1px 2px rgb(24 24 27 / .05);
  font-size: 13px;
  color: var(--learn-card-foreground, #3f3f46);
}
.q-comments-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 6px;
  font-weight: 600;
  color: var(--learn-foreground, #27272a);
}
.q-comments-count { font-size: 12px; font-weight: 400; color: var(--learn-muted-foreground, #71717a); }

/* 弹幕是视口层，只有条和互动浮层接收指针，空白处仍可操作题目。 */
.q-danmaku { position:fixed; inset:var(--q-danmaku-top,112px) 0 auto; height:104px; z-index:180; pointer-events:none; }
.q-danmaku-track { position:relative; height:100%; pointer-events:none; }
.q-danmaku:not(#authModal) .q-danmaku-track .q-danmaku-item {
  box-sizing:border-box; position:absolute; left:100%; top:calc(24px + var(--q-danmaku-lane,0) * 52px);
  display:inline-flex; align-items:center; gap:8px; height:44px; max-width:calc(100vw - 24px);
  margin:0; padding:6px 12px 6px 9px; border:1px solid #dedfe8; border-radius:14px;
  background:rgb(255 255 255 / .96); color:#15162b;
  font-family:inherit; font-size:13.5px; font-weight:400; line-height:1.5; white-space:nowrap;
  box-shadow:0 3px 12px rgb(39 35 75 / .07); pointer-events:auto; cursor:pointer;
  animation:q-danmaku-scroll var(--q-danmaku-duration,18s) linear infinite; animation-delay:var(--q-danmaku-delay,0s); will-change:transform; opacity:var(--q-danmaku-opacity,1);
  outline:none; text-align:left; text-transform:none; letter-spacing:normal;
}
.q-danmaku:not(#authModal) .q-danmaku-track .q-danmaku-item:is(:hover,:focus-visible,.is-paused) {
  animation-play-state:paused; background:#f5f2ff; border-color:#a58aff; box-shadow:0 4px 14px rgb(73 43 131 / .08);
}
.q-danmaku:not(#authModal) .q-danmaku-track .q-danmaku-item:focus-visible { outline:2px solid #a58aff; outline-offset:2px; }
.q-danmaku .q-danmaku-content { min-width:0; overflow:hidden; text-overflow:ellipsis; }
.q-danmaku .q-danmaku-like { display:inline-flex; align-items:center; flex-shrink:0; gap:5px; color:#72758a; font-size:12px; line-height:1; white-space:nowrap; }
.q-danmaku .q-danmaku-like.is-liked { color:#7651ee; }
.q-danmaku .kg-icon { display:block; flex-shrink:0; }
.q-danmaku:not(#authModal) .q-danmaku-track .q-danmaku-replay { animation-iteration-count:1; animation-delay:0s; }
.q-danmaku-settings { width:min(390px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;padding:22px;border:1px solid #d9dce5;border-radius:14px;background:#fff;color:#202638; }
.q-danmaku-settings::backdrop { background:#17203365; }
.q-danmaku-settings header,.q-danmaku-settings footer { display:flex;align-items:center;justify-content:space-between;gap:12px; }
.q-danmaku-settings h2 { margin:0;font-size:18px; }
.q-danmaku-settings label { display:grid;gap:7px;margin:18px 0;font-size:14px; }
.q-danmaku-settings input,.q-danmaku-settings select { min-height:42px;width:100%;padding:8px;border:1px solid #cdd3df;border-radius:7px;background:#fff;color:#202638;box-sizing:border-box; }
.q-danmaku-settings small { color:#657085; }
.q-danmaku-settings button { min-height:40px;padding:8px 14px;border:1px solid #cdd3df;border-radius:7px;background:#f6f7fa;color:#202638;cursor:pointer; }
.q-danmaku-settings footer button[type=submit] { background:#26364b;color:white; }
.q-emoji-toggle { align-self:flex-start;min-height:32px;padding:4px 10px;border:1px solid #dedfe8;border-radius:6px;background:#fff;color:#5b6474;cursor:pointer; }
.q-emoji-picker { display:flex;flex-wrap:wrap;gap:5px;padding:6px 0; }
.q-emoji-picker[hidden] { display:none!important; }
.q-emoji-picker button { width:36px;height:36px;border:1px solid transparent;border-radius:5px;background:#f5f6f9;font-size:21px;cursor:pointer; }
@keyframes q-danmaku-scroll {
  from { transform:translate(0,-50%); }
  to { transform:translate(calc(-100% - 100vw),-50%); }
}
@media(prefers-reduced-motion:reduce) {
  .q-danmaku { max-height:25vh; inset:var(--q-danmaku-top,112px) 12px auto; overflow:auto; }
  .q-danmaku-track { display:flex; flex-wrap:wrap; gap:8px; }
  .q-danmaku:not(#authModal) .q-danmaku-track .q-danmaku-item { animation:none; position:static; transform:none; flex-shrink:0; }
}

/* 留言列表 */
.q-comment-list { list-style: none; margin: 0; padding: 0; }
.q-comment {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 0;
  border-top: 1px dashed var(--learn-border, #e4e4e7);
}
.q-comment:first-child { border-top: 0; }
.q-comment-main { min-width: 0; flex: 1; }
.q-comment-author { font-weight: 600; color: var(--learn-accent-foreground, #4c3fd1); margin-right: 6px; }
.q-comment-time { font-size: 11px; color: var(--learn-muted-foreground, #a1a1aa); }
.q-comment-content { margin: 3px 0 0; word-break: break-word; white-space: pre-wrap; }
.q-comment-actions { display: flex; gap: 6px; flex-shrink: 0; }
.q-comment-like,
.q-comment-delete {
  border: 1px solid var(--learn-border, #e4e4e7);
  background: var(--learn-card, #fff);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 12px;
  color: var(--learn-muted-foreground, #71717a);
  cursor: pointer;
}
.q-comment-like.is-liked { background: var(--learn-accent, #f1efff); border-color: #cdc4fb; color: var(--learn-accent-foreground, #4c3fd1); }
.q-comment-delete:hover { color: var(--learn-destructive, #dc2626); border-color: #fecaca; }
.q-comments-empty { margin: 4px 0; font-size: 12px; color: var(--learn-muted-foreground, #a1a1aa); }
.q-comments-error { margin: 4px 0; font-size: 12px; color: var(--learn-warning, #b45309); }
.q-comments-error button { border: 0; background: none; color: var(--learn-accent-foreground, #4c3fd1); cursor: pointer; text-decoration: underline; }

/* 发送框 */
.q-composer { margin-top: 8px; }
.q-composer-input {
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  min-height: 44px;
  padding: 8px 10px;
  border: 1px solid var(--learn-input, #e4e4e7);
  border-radius: var(--learn-radius-control, 8px);
  font: inherit;
  color: var(--learn-foreground, #27272a);
  background: var(--learn-card, #fff);
}
.q-composer-input:focus { outline: 2px solid var(--learn-ring, #6d5dfc); outline-offset: 1px; border-color: var(--learn-ring, #6d5dfc); }
.q-composer-error { margin: 6px 0 0; font-size: 12px; color: var(--learn-destructive, #dc2626); }
.q-composer-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; }
.q-composer-count { font-size: 11px; color: var(--learn-muted-foreground, #a1a1aa); }
.q-composer-send {
  border: 0;
  background: var(--learn-primary, #6d5dfc);
  color: var(--learn-primary-foreground, #fff);
  border-radius: 999px;
  padding: 4px 16px;
  font-size: 12px;
  cursor: pointer;
}
.q-composer-send:hover:not(:disabled) { filter: brightness(1.06); }
.q-composer-send:disabled { background: var(--learn-secondary, #f4f4f5); color: var(--learn-muted-foreground, #a1a1aa); cursor: not-allowed; }
.q-composer-login {
  width: 100%;
  border: 1px dashed #c4c4cf;
  background: var(--learn-card, #fff);
  color: var(--learn-accent-foreground, #4c3fd1);
  border-radius: var(--learn-radius-control, 8px);
  padding: 8px;
  font-size: 12px;
  cursor: pointer;
}
.q-composer-login:hover { background: var(--learn-accent, #f1efff); }

.q-comments-toast {
  margin-top: 8px;
  padding: 5px 10px;
  background: #fdf6ec;
  border: 1px solid #f0e0c0;
  border-radius: 6px;
  font-size: 12px;
  color: var(--learn-warning, #9a5b13);
}
.q-comments-toast[hidden] { display: none; }

/* 报告页折叠条：默认只显示入口，展开才拉取留言 */
.q-comments.is-collapsed { padding: 0; background: transparent; border: 0; box-shadow: none; }
.q-comments-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px dashed #d4d4dc;
  background: var(--learn-secondary, #f4f4f5);
  border-radius: var(--learn-radius-control, 8px);
  padding: 7px 12px;
  font-size: 12px;
  color: var(--learn-secondary-foreground, #3f3f46);
  cursor: pointer;
  text-align: left;
}
.q-comments-toggle:hover { background: var(--learn-accent, #f1efff); border-color: var(--learn-ring, #6d5dfc); }
.q-comments-collapse {
  border: 0;
  background: none;
  font-size: 11px;
  color: var(--learn-muted-foreground, #71717a);
  cursor: pointer;
}
.q-comments-collapse:hover { color: var(--learn-accent-foreground, #4c3fd1); }

/* 报告页题卡内嵌时收窄外边距 */
.practice-review-card .q-comments { margin: 10px 0 0; }


/* 讨论抽屉：桌面端为右侧整高浅色面板（与做题页卡片体系一致），移动端为底部弹层。 */
.q-comments-drawer {
  position:fixed; left:auto; right:0; top:0; bottom:0; width:min(430px,100vw);
  z-index:240;
  display:flex; flex-direction:column;
  background:var(--learn-card, #fff); color:var(--learn-foreground, #27272a);
  border-left:1px solid var(--learn-border, #e4e4e7); border-bottom:0; border-radius:0;
  box-shadow:-16px 0 48px rgb(24 24 27 / .18);
  overscroll-behavior:contain;
  animation:q-drawer-slide .24s cubic-bezier(.2,.8,.25,1);
}
@keyframes q-drawer-slide { from { transform:translateX(40px); opacity:.35; } to { transform:translateX(0); opacity:1; } }
@keyframes q-drawer-rise { from { transform:translateY(24px); opacity:.4; } to { transform:translateY(0); opacity:1; } }
@media(prefers-reduced-motion:reduce){ .q-comments-drawer { animation:none; } }
.q-comments-drawer .q-drawer-handle { display:none; }
.q-comments-drawer .q-comments { flex:1; min-height:0; display:flex; flex-direction:column; border:0; margin:0; padding:0 18px; background:transparent; border-radius:0; box-shadow:none; font-size:14px; color:var(--learn-foreground, #27272a); }
.q-comments-drawer .q-comments-head {
  position:sticky; top:0; z-index:2;
  display:flex; align-items:center; gap:8px;
  padding:16px 2px 12px; margin:0; background:var(--learn-card, #fff);
  border-bottom:1px solid var(--learn-border, #e4e4e7); font-weight:400;
}
.q-comments-drawer .q-comments-head>span:first-child { display:flex; align-items:baseline; gap:6px; font-size:16px; font-weight:700; color:var(--learn-foreground, #18181b); }
.q-comments-drawer .q-comments-count { color:var(--learn-muted-foreground, #71717a); font-size:13px; font-weight:500; font-style:normal; }
.q-comments-drawer .q-comments-collapse { margin-left:auto; display:grid; place-items:center; width:32px; height:32px; padding:0; border:0; border-radius:50%; background:transparent; color:var(--learn-muted-foreground, #71717a); font-size:15px; cursor:pointer; transition:background .15s ease,color .15s ease; }
.q-comments-drawer .q-comments-collapse:hover { background:var(--learn-secondary, #f4f4f5); color:var(--learn-foreground, #18181b); }
.q-comments-drawer .q-comment-list { flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; list-style:none; margin:0; padding:4px 2px 14px; scrollbar-width:thin; scrollbar-color:#d4d4dc transparent; }
.q-comments-drawer .q-comment { align-items:flex-start; gap:10px; padding:12px 2px; border-top:0; }
.q-comments-drawer .q-comment-author { font-size:12.5px; font-weight:600; color:var(--learn-accent-foreground, #4c3fd1); }
.q-comments-drawer .q-comment-time { font-size:11px; color:var(--learn-muted-foreground, #a1a1aa); }
.q-comments-drawer .q-comment-content { margin:4px 0 0; font-size:14px; line-height:1.65; color:var(--learn-foreground, #27272a); }
.q-comments-drawer .q-comment-actions { flex-direction:row; flex-wrap:wrap; align-items:center; gap:8px; padding:8px 0 2px; }
.q-comments-drawer .q-comment-actions button { display:inline-flex; align-items:center; gap:4px; padding:3px 11px; border:1px solid var(--learn-border, #e4e4e7); border-radius:999px; background:var(--learn-card, #fff); color:var(--learn-muted-foreground, #71717a); font-size:12px; line-height:1.6; cursor:pointer; transition:color .15s ease, border-color .15s ease, background .15s ease; white-space:nowrap; }
.q-comments-drawer .q-comment-actions button:hover { background:var(--learn-accent, #f1efff); border-color:var(--learn-ring, #6d5dfc); color:var(--learn-accent-foreground, #4c3fd1); }
.q-comments-drawer .q-comment-actions button[aria-pressed="true"] { background:var(--learn-accent, #f1efff); border-color:var(--learn-ring, #6d5dfc); color:var(--learn-accent-foreground, #4c3fd1); }
.q-comments-drawer .q-comment-like.is-liked { background:#fff1f2; border-color:#fecdd3; color:#e11d48; }
.q-comments-drawer .q-comment-delete:hover { background:#fef2f2; border-color:#fecaca; color:var(--learn-destructive, #dc2626); }
.q-comments-drawer .q-comments-empty { padding:32px 0 22px; text-align:center; color:var(--learn-muted-foreground, #71717a); font-size:13px; }
.q-comments-drawer .q-comments-error { margin:10px 0; color:var(--learn-warning, #b45309); font-size:12px; }
.q-comments-drawer .q-comments-error button { border:0; background:none; color:var(--learn-accent-foreground, #4c3fd1); text-decoration:underline; }
.q-comments-drawer [data-qc-action="more"] { display:block; width:100%; margin:2px 0 10px; padding:9px; border:1px solid var(--learn-border, #e4e4e7); border-radius:10px; background:var(--learn-secondary, #f4f4f5); color:var(--learn-secondary-foreground, #3f3f46); font-size:12.5px; cursor:pointer; }
.q-comments-drawer [data-qc-action="more"]:hover { background:var(--learn-accent, #f1efff); border-color:var(--learn-ring, #6d5dfc); color:var(--learn-accent-foreground, #4c3fd1); }
.q-comments-drawer [data-qc-reply] { margin:8px 0 0; padding:8px 12px; border-radius:10px; background:var(--learn-secondary, #f4f4f5); color:var(--learn-muted-foreground, #52525b); font-size:12px; }
.q-comments-drawer [data-qc-reply] button { border:0; background:transparent; color:var(--learn-accent-foreground, #4c3fd1); cursor:pointer; }
.q-comments-drawer .q-comments-toast { margin:8px 0; padding:7px 12px; background:#fdf6ec; border:1px solid #f0e0c0; border-radius:8px; color:var(--learn-warning, #9a5b13); font-size:12px; }
.q-comments-drawer .q-comment-thread { margin-left:44px; border-left:2px solid var(--learn-border, #e4e4e7); padding-left:12px; }
.q-comments-drawer .q-comment-thread>button,
.q-comments-drawer [data-qc-action="toggle-replies"] { display:inline-flex; align-items:center; gap:5px; margin:4px 0 8px; padding:0; border:0; background:transparent; color:var(--learn-muted-foreground, #71717a); font-size:12px; cursor:pointer; }
.q-comments-drawer [data-qc-action="toggle-replies"]:hover { color:var(--learn-accent-foreground, #4c3fd1); }
.q-comments-drawer .q-composer { flex-shrink:0; margin:0; padding:12px 2px calc(14px + env(safe-area-inset-bottom)); background:var(--learn-card, #fff); border-top:1px solid var(--learn-border, #e4e4e7); }
.q-comments-drawer .q-composer-input { resize:none; min-height:46px; max-height:130px; padding:11px 14px; border:1px solid var(--learn-input, #e4e4e7); border-radius:12px; background:var(--learn-background, #fafafa); font-size:14px; line-height:1.5; color:var(--learn-foreground, #27272a); }
.q-comments-drawer .q-composer-input::placeholder { color:var(--learn-muted-foreground, #a1a1aa); }
.q-comments-drawer .q-composer-input:focus { outline:2px solid var(--learn-ring, #6d5dfc); outline-offset:1px; background:var(--learn-card, #fff); border-color:var(--learn-ring, #6d5dfc); }
.q-comments-drawer .q-composer-foot { margin-top:8px; }
.q-comments-drawer .q-composer-count { color:var(--learn-muted-foreground, #a1a1aa); font-size:11px; }
.q-comments-drawer .q-composer-send { padding:8px 22px; border:0; border-radius:999px; background:var(--learn-primary, #6d5dfc); color:var(--learn-primary-foreground, #fff); font-size:13px; font-weight:700; cursor:pointer; transition:filter .15s ease; }
.q-comments-drawer .q-composer-send:hover:not(:disabled) { filter:brightness(1.08); }
.q-comments-drawer .q-composer-send:disabled { background:var(--learn-secondary, #f4f4f5); color:var(--learn-muted-foreground, #a1a1aa); cursor:not-allowed; }
.q-comments-drawer .q-composer-login { padding:12px; border:1px dashed #c4c4cf; border-radius:12px; background:var(--learn-secondary, #f4f4f5); color:var(--learn-accent-foreground, #4c3fd1); font-size:13px; cursor:pointer; }
.q-comments-drawer .q-composer-login:hover { background:var(--learn-accent, #f1efff); }
/* 评论头像：取昵称首字符 + 由昵称决定的色相 */
.q-comment-avatar { display:grid; place-items:center; width:34px; height:34px; flex-shrink:0; border-radius:50%; background:hsl(var(--avatar-hue,210) 42% 44%); color:#fff; font-size:14px; font-weight:700; user-select:none; }
/* 标记区「评论」按钮直开时的不可见宿主：只承载折叠条 DOM，不展示。 */
.q-comments-standalone-host { display:none; }

/* 弹幕互动：组件尺寸按批准稿约 3× 导出换算，按钮保留 44px 点击区。
 * 学习皮肤的 :not(#authModal *) 带 ID 优先级；组件用同等的认证排除范围和更具体子层级保护自己的按钮。 */
.q-danmaku:not(#authModal) .q-danmaku-pop {
  box-sizing:border-box; position:fixed; z-index:250; width:286px; max-width:calc(100vw - 16px); max-height:calc(100vh - 16px);
  overflow:auto; padding:14px 14px 12px; background:#fff; color:#15162b; border:1px solid #dedfe8; border-radius:16px;
  box-shadow:0 7px 24px rgb(39 35 75 / .09),0 2px 6px rgb(39 35 75 / .04); pointer-events:auto;
  font-family:inherit; font-size:14px; font-weight:400; line-height:1.5;
}
.q-danmaku:not(#authModal) .q-danmaku-pop::before {
  content:''; position:fixed; top:var(--q-pop-arrow-y); left:var(--q-pop-arrow-x); width:13px; height:13px;
  transform:translate(-50%,-50%) rotate(45deg); background:#fff; border-left:1px solid #dedfe8; border-top:1px solid #dedfe8; border-radius:2px;
}
.q-danmaku:not(#authModal) .q-danmaku-pop[data-placement="top"]::before { transform:translate(-50%,-50%) rotate(225deg); }
.q-danmaku:not(#authModal) .q-danmaku-pop-head { display:flex; align-items:center; gap:10px; min-height:34px; }
.q-danmaku:not(#authModal) .q-danmaku-pop-meta { display:flex; flex:1; min-width:0; flex-direction:column; gap:0; }
.q-danmaku:not(#authModal) .q-danmaku-pop-meta time { color:#9597a7; font-size:11px; line-height:1.4; }
.q-danmaku:not(#authModal) .q-danmaku-pop button { box-sizing:border-box; font-family:inherit; font-weight:400; text-transform:none; letter-spacing:normal; cursor:pointer; box-shadow:none; transform:none; outline:none; }
.q-danmaku:not(#authModal) .q-danmaku-pop .q-danmaku-pop-close { display:grid; place-items:center; flex-shrink:0; width:44px; height:44px; min-width:44px; margin:-5px -8px -5px 0; padding:0; border:0; border-radius:10px; background:transparent; color:#858898; }
.q-danmaku:not(#authModal) .q-danmaku-pop-text { display:block; margin:14px 0 16px; color:#15162b; font-size:14px; line-height:1.5; overflow-wrap:anywhere; white-space:pre-wrap; }
.q-danmaku:not(#authModal) .q-danmaku-pop .q-danmaku-pop-actions { display:flex; align-items:stretch; gap:0; border-top:1px solid #e6e7ee; padding-top:12px; }
.q-danmaku:not(#authModal) .q-danmaku-pop .q-danmaku-pop-actions button { display:flex; flex:1; min-width:44px; min-height:44px; flex-direction:column; align-items:center; justify-content:center; gap:4px; margin:0; padding:0 2px; border:0; border-radius:0; background:transparent; color:#676b7e; font-size:12px; line-height:1.5; }
.q-danmaku:not(#authModal) .q-danmaku-pop .q-danmaku-pop-actions button+button { border-left:1px solid #e9e9f0; }
.q-danmaku:not(#authModal) .q-danmaku-pop .q-danmaku-pop-actions button.is-liked { color:#7651ee; }
.q-danmaku:not(#authModal) .q-danmaku-pop button:is(:hover,:focus-visible) { background:#f5f2ff; color:#7651ee; }
.q-danmaku:not(#authModal) .q-danmaku-pop button:focus-visible { outline:2px solid #a58aff; outline-offset:-2px; }
.q-danmaku:not(#authModal) .q-danmaku-pop .q-danmaku-pop-extra { display:flex; gap:8px; margin-top:12px; padding-top:10px; border-top:1px solid #e6e7ee; }
.q-danmaku:not(#authModal) .q-danmaku-pop .q-danmaku-pop-extra[hidden] { display:none; }
.q-danmaku:not(#authModal) .q-danmaku-pop .q-danmaku-pop-extra button { flex:1; min-height:44px; padding:6px 8px; border:0; border-radius:9px; background:#f6f5fa; color:#676b7e; font-size:12px; }
.q-danmaku:not(#authModal) .q-danmaku-pop-hint { margin:14px 0 0; color:#9597a7; text-align:center; font-size:11px; line-height:16px; }
.q-comment-actions button,.q-comments.is-collapsed>button { border:1px solid var(--learn-border, #e4e4e7); border-radius:8px; background:var(--learn-card, #fff); color:var(--learn-secondary-foreground, #3f3f46); padding:5px 8px; }
.q-comment-actions [aria-pressed=true] { background:var(--learn-accent, #f1efff); color:var(--learn-accent-foreground, #4c3fd1); }
.q-comment-parent { display:block; color:var(--learn-muted-foreground, #71717a); margin-top:6px; }
.q-comments.is-collapsed { display:flex; flex-wrap:wrap; gap:6px; }
.q-comments-toggle { flex:1; min-width:140px; }
.q-drawer-handle { width:48px; height:5px; margin:0 auto 12px; border-radius:8px; background:#d4d4dc; touch-action:none; cursor:ns-resize; }
@media(max-width:700px) {
  .q-comments-drawer { left:0; right:0; top:auto; bottom:0; width:auto; height:62vh; max-height:88vh; border-left:0; border-radius:18px 18px 0 0; box-shadow:0 -14px 48px rgb(24 24 27 / .18); padding-bottom:env(safe-area-inset-bottom); animation:q-drawer-rise .24s cubic-bezier(.2,.8,.25,1); }
  .q-comments-drawer .q-drawer-handle { display:block; width:44px; height:5px; flex-shrink:0; margin:10px auto 2px; border-radius:8px; background:#d4d4dc; touch-action:none; cursor:ns-resize; }
  .q-danmaku { inset:var(--q-danmaku-top,112px) 0 auto; }
  .q-comment-actions button { min-height:32px; }
}
.q-favorite-question { position:fixed; inset:70px 20px 30px; z-index:200; overflow:auto; padding:24px; background:var(--learn-card, #fff); border:1px solid var(--learn-border, #e4e4e7); border-radius:14px; box-shadow:var(--learn-shadow-float, 0 4px 12px rgb(24 24 27 / .08)); }
.q-comment-thread { list-style:none; margin:0 0 8px 12px; border-left:2px solid var(--learn-border, #e4e4e7); padding-left:12px; }
.q-comment-thread ul { list-style:none; padding:0; }
@media(max-width:700px) and (prefers-reduced-motion:reduce) {
  /* Keep stationary comments below mobile navigation and score controls. */
  .q-danmaku { top:var(--q-danmaku-top,112px); }
}

/* A viewport popover never contributes to the comment drawer's flex layout. */
.q-comments-drawer .q-emoji-picker { position:fixed;z-index:4;display:flex;flex-direction:column;flex-wrap:nowrap;gap:10px;box-sizing:border-box;width:344px;max-width:calc(100vw - 24px);max-height:310px;padding:14px;border:1px solid #dedfe8;border-radius:14px;background:#fff;box-shadow:0 10px 36px #20213b24;color:#27272a;overflow:hidden; }
.q-comments-drawer .q-emoji-picker[hidden] { display:none!important; }
.q-emoji-head { flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:16px; }
.q-emoji-head strong { font-size:14px;font-weight:650; }
.q-comments-drawer .q-emoji-head button { width:28px;height:28px;padding:0;border-radius:50%;font-size:18px;background:#f4f4f6;color:#71717a; }
.q-emoji-categories { display:flex;gap:4px;flex-shrink:0; }
.q-comments-drawer .q-emoji-categories button { width:auto;min-height:30px;height:auto;padding:5px 10px;font-size:12px;color:#71717a;background:transparent; }
.q-comments-drawer .q-emoji-categories button[aria-pressed=true] { color:#5d43c9;background:#f0edff; }
.q-emoji-grid { flex:1;align-content:start;width:100%;box-sizing:border-box;display:grid;grid-template-columns:repeat(auto-fit,minmax(36px,1fr));gap:4px;min-height:0;overflow:auto;overscroll-behavior:contain;padding:2px; }
.q-comments-drawer .q-emoji-grid button { display:grid;place-items:center;width:36px;height:36px;margin:0;padding:4px;border:1px solid transparent;border-radius:7px;background:transparent;font-size:23px; }
.q-comments-drawer .q-emoji-grid button[hidden] { display:none; }
.q-emoji-grid button:hover { background:#f0edff;border-color:#ddd6fe; }
.q-emoji-picker button:focus-visible { outline:2px solid #8b72db;outline-offset:-2px; }
.q-emoji-grid img { display:block;width:28px;height:28px;object-fit:contain;pointer-events:none; }
.q-emoji-picker small { flex-shrink:0;color:#8b8b97;font-size:11px; }

.q-emoji-grid img[hidden],.q-emoji-fallback[hidden] { display:none!important; }

.q-inline-emoji { display:inline-block;width:20px;height:20px;margin:0 1px;object-fit:contain;vertical-align:-4px; }
.q-danmaku .q-inline-emoji { width:18px;height:18px;vertical-align:-3px; }