/* 左滑引用：拖动中的气泡位移 + 让出来的空当里那枚引号，外加输入框上方的引用带。
   只有带 .q-drag 的行才吃 transform，静止的气泡一行 CSS 都不多背。 */

#page-murmur .row.q-drag .bubble{
  transform: translate3d(var(--qx, 0px), 0, 0);
  will-change: transform;
}
#page-murmur .row.q-snap .bubble{
  transition: transform .19s cubic-bezier(.2,.8,.2,1);
}
/* 引号贴在气泡右侧让出来的空当里，跟着气泡一起走 */
#page-murmur .row.q-drag .bubble::after{
  content: "❝";
  position: absolute;
  top: 50%;
  left: 100%;
  margin-left: 12px;
  transform: translateY(-50%) scale(calc(.72 + var(--qp, 0) * .28));
  opacity: var(--qp, 0);
  color: var(--accent);
  font-size: 17px;
  line-height: 1;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce){
  #page-murmur .row.q-snap .bubble{ transition: none; }
}

/* ---- 引用带 ---- */
/* composer 是开了 wrap 的 flex，order 比图片托盘（-1）更小，所以引用带落在
   托盘上面、输入框最上方，field 与发送键的排布不受影响。 */
/* width:100% + 横向 margin 会让它比行宽多出 margin 的那几像素（附件托盘就是
   靠纯 padding 绕开这点的）。这里用 border-box + padding 内缩，横向不留 margin。 */
#page-murmur .quote-bar{
  order: -2; width: 100%; box-sizing: border-box;
  display: flex; align-items: center; gap: 9px;
  margin: 0 0 7px;
  padding: 8px 10px 8px 11px;
  border-radius: 14px;
  border: 1px solid var(--field-line);
  border-left: 2.5px solid var(--accent);
  background: var(--field-bg);
  box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  animation: quoteBarIn .2s cubic-bezier(.2,.8,.2,1);
}
#page-murmur .quote-bar[hidden]{ display: none; }
@keyframes quoteBarIn{
  from{ opacity: 0; transform: translateY(5px); }
  to{ opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce){
  #page-murmur .quote-bar{ animation: none; }
}
/* 装饰引号：flex:none 不参与压缩，所以它绝不能装正文。
   overflow:hidden 是兜底 —— 万一又有人往这儿写字，也只会被裁掉，
   不会把 × 顶出屏幕。 */
#page-murmur .quote-bar-mark{
  flex: 0 0 auto; max-width: 1.2em; overflow: hidden;
  color: var(--accent); font-size: 14px; line-height: 1; opacity: .75;
}
/* min-width:0 是关键：flex 子项默认 min-width:auto，
   子元素的 text-overflow 会被撑开的内容顶穿。 */
#page-murmur .quote-bar-body{ flex: 1 1 auto; min-width: 0; overflow: hidden; }
#page-murmur .quote-bar-name{
  display: block;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 11.5px; font-weight: 600; letter-spacing: .02em;
  color: var(--accent);
}
#page-murmur .quote-bar-text{
  display: block; margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 12px; line-height: 1.45; color: var(--text-faint);
}
/* × 永远排在最后且不可压缩：触控目标撑到 30px，别做成指甲盖。 */
#page-murmur .quote-bar-x{
  flex: 0 0 auto; width: 30px; height: 30px; padding: 0; margin-left: 2px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: transparent; color: var(--text-faint);
  font-size: 18px; line-height: 1; cursor: pointer;
}
#page-murmur .quote-bar-x:active{ background: rgba(0,0,0,.06); transform: scale(.92); }