/* ============================================================
   广场(糖哥 2026-07-24):群聊 + 文库合并,外加 X 式发文流
   本文件只负责「页签壳」与「发文流」;群聊与文库沿用各自原有的
   chat.css / library.css,一行没动。
   ============================================================ */

/* ===== 推文区字号体系(糖哥 2026-08-30:「帖子字体相较 X 感觉略小,没有 X 的那种感觉,
   你把字体系统性调节成和 X 差不多的大小,把排版比例也和 X 靠拢」)=====
   量过 X web 版的实际取值:正文 15px/20px、用户名 15px/700、@handle 与时间也是 15px(靠颜色区分)、
   头像 40px、卡片内边距 12px、互动条图标 18.75px。
   我们此前:正文 15px/1.6、名字 14.5、时间只有 12.5 —— 时间比 X 小了整整一档,
   整块看下来就"没那么饱满"。这里按 X 对齐,只在中文需要处放一点点:
   正文 15.5(中文比拉丁字母视觉重心低,15 偏小)、行高 1.52(X 是 1.33,中文太挤)。
   ⚠️改字号只改这一组变量,不要再往下面各处写死 px。 */
:root {
  --sq-fs-body: 15.5px;      /* 推文正文 */
  --sq-lh-body: 1.52;
  --sq-fs-body-lg: 17.5px;   /* 详情页主帖正文 */
  --sq-fs-name: 15px;        /* 用户名 */
  --sq-fs-meta: 14px;        /* 时间 / @身份号 / 次要信息 */
  --sq-fs-act: 13px;         /* 互动条数字 */
  --sq-avatar: 40px;         /* 头像(X 也是 40) */
}

/* display:flex 的特异性高过浏览器默认给 [hidden] 的 display:none,
   不显式写这条,JS 里设 hidden=true 的元素照样会画出来(发文框和游客条同时出现就是这么来的) */
.sq-composer[hidden], .sq-guest[hidden], .sq-panel[hidden], .sq-attach[hidden], .sq-more[hidden],
.sq-expand[hidden], .sq-notif-thumb[hidden], .sq-thread-top[hidden] { display: none; }
/* ⚠️凡是自带 display 的类,只要 JS 会给它设 hidden,就必须登记到上面这行。
   .sq-expand 就是漏登记的活例子:它是 inline-block,特异性压过 UA 给 [hidden] 的 display:none,
   于是「显示更多」在没截断的帖子上照样画出来(糖哥 2026-08-30 截图报的正是这个)。
   ⚠️验收也要跟着改:查 el.hidden 属性会显示"已隐藏"、看着是绿的,
   必须量 getComputedStyle(el).display 或 offsetParent 才算数。 */

/* ---------- 推特式三栏壳(糖哥 2026-07-25):左导航 / 中内容 / 右推荐 ---------- */
/* ⚠️容器宽度与左栏位置在所有面板下必须完全一致(糖哥 2026-08-04):
   原先群聊态用 max-width:none 铺满全屏、其余面板 1300px 居中,一切换左栏就从居中弹到最左,
   视觉上是明显的整页晃动。现在统一 1300px 并让第三列弹性吃掉余量 ——
   两种模式都填满同一个容器,左栏边缘同一位置,差异只发生在内容区内部。 */
.sq-shell {
  display: grid;
  grid-template-columns: 232px minmax(0, 640px) minmax(300px, 1fr);
  align-items: start;
  /* 三栏各有上限后,超宽屏上列宽总和会小于容器,余量默认全堆在右边、整体偏左。
     justify-content 让这几栏在容器里居中,两侧留白才对称。 */
  justify-content: center;
  max-width: var(--page-max); margin: 0 auto;
}
/* 群聊内部还有「频道|正文|成员」三列:中列拉满、藏掉推荐栏,但容器宽度不变 */
.sq-shell.chat-mode { grid-template-columns: 232px minmax(0, 1fr); }
.sq-shell.chat-mode .sq-aside { display: none; }

/* 大屏:三栏一起长大,而不是把余量全丢给第三列(糖哥 2026-08-24「要自适应屏幕的分辨率」)。
   第三列原本是 minmax(300px, 1fr) —— 在 2K 屏上它一个人吃掉近 1000px,
   里面就两张推荐卡,拉得空空荡荡。改成三栏各有各的舒适上限,余量还给页面留白。
   中列跟着放宽一点(推文正文更好读),但不超过 780:一行太长眼睛扫不回来。 */
@media (min-width: 1600px) {
  .sq-shell { grid-template-columns: 252px minmax(0, 700px) minmax(320px, 400px); }
}
@media (min-width: 1920px) {
  .sq-shell { grid-template-columns: 268px minmax(0, 740px) minmax(340px, 430px); }
}
@media (min-width: 2400px) {
  .sq-shell { grid-template-columns: 280px minmax(0, 780px) minmax(360px, 460px); }
}

/* 左:主导航 rail(sticky,可拓展) */
.sq-rail {
  position: sticky; top: var(--sq-header-h, 64px); align-self: start;
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 10px 16px; height: calc(100vh - var(--sq-header-h, 64px));
  overflow-y: auto; scrollbar-width: none;
}
.sq-rail::-webkit-scrollbar { width: 0; height: 0; }
.sq-nav-item {
  display: flex; align-items: center; gap: 15px; width: 100%; text-align: left;
  padding: 10px 16px; border: 0; border-radius: 999px; cursor: pointer; text-decoration: none;
  background: transparent; color: var(--text-secondary, #b0b4bd);
  font-size: calc(16.5px * var(--sv-font-scale, 1)); font-weight: 600; transition: background .15s, color .15s;
}
.sq-nav-item svg { flex: 0 0 auto; }
.sq-nav-item:hover { background: var(--accent-soft, rgba(255,255,255,0.06)); color: var(--text-main, #f4f5f7); }
.sq-nav-item.active { color: var(--text-main, #f4f5f7); font-weight: 800; }
.sq-nav-item.active svg { color: var(--text-main, #f4f5f7); }
.sq-rail-post {
  margin-top: 12px; border: 0; border-radius: 999px; cursor: pointer;
  padding: 13px; font-size: calc(15px * var(--sv-font-scale, 1)); font-weight: 800;
  background: var(--accent, #0f1115); color: var(--accent-contrast, #fff);
}
.sq-rail-post:hover { opacity: .88; }

/* 左栏底部用户卡(参考推特):贴底显示 */
.sq-rail-me {
  display: flex; align-items: center; gap: 10px; margin-top: auto;
  padding: 8px 10px; border-radius: 999px; text-decoration: none;
}
.sq-rail-me[hidden] { display: none; }
.sq-rail-me:hover { background: var(--accent-soft, rgba(255,255,255,0.06)); }
.sq-rail-me-av {
  flex: 0 0 auto; display: grid; place-items: center; width: 38px; height: 38px;
  border-radius: 50%; background: var(--accent-soft, rgba(255,255,255,0.08));
  color: var(--accent, #0f1115); font-size: calc(15px * var(--sv-font-scale, 1)); font-weight: 700; user-select: none;
}
.sq-rail-me-info { display: flex; flex-direction: column; min-width: 0; line-height: 1.28; }
.sq-rail-me-name { font-size: calc(14px * var(--sv-font-scale, 1)); font-weight: 700; color: var(--text-main, #f4f5f7); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sq-rail-me-handle { font-size: calc(12.5px * var(--sv-font-scale, 1)); color: var(--text-muted, #8a8f9c); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 中:内容列(左右描边,像 X 的时间线列) */
.sq-center {
  min-width: 0; min-height: calc(100vh - var(--sq-header-h, 64px));
  border-left: 1px solid var(--line-soft, rgba(255,255,255,0.06));
  border-right: 1px solid var(--line-soft, rgba(255,255,255,0.06));
}
.sq-shell.chat-mode .sq-center { border-right: 0; }

/* 右:推荐 / 快捷入口(sticky,可拓展) */
.sq-aside { position: sticky; top: var(--sq-header-h, 64px); align-self: start; padding: 14px 14px 40px; }
.sq-aside-card {
  background: var(--bg-card, #14181f); border: 1px solid var(--line-soft, rgba(255,255,255,0.06));
  border-radius: 14px; padding: 6px; margin-bottom: 14px;
}
.sq-aside-head { font-size: calc(15px * var(--sv-font-scale, 1)); font-weight: 800; color: var(--text-main, #f4f5f7); padding: 10px 12px 6px; }
.sq-aside-link {
  display: block; padding: 10px 12px; border-radius: 10px; text-decoration: none;
  color: var(--text-secondary, #b0b4bd); font-size: calc(14px * var(--sv-font-scale, 1)); font-weight: 600;
}
.sq-aside-link:hover { background: var(--accent-soft, rgba(255,255,255,0.06)); color: var(--text-main, #f4f5f7); }
.sq-aside-quote { margin: 0; padding: 2px 12px 10px; font-size: calc(13.5px * var(--sv-font-scale, 1)); line-height: 1.65; color: var(--text-secondary, #b0b4bd); }

/* 群聊面板高度 = 视口 - 头部(由 square.js 量出 --sq-chrome-h) */
.sq-panel .chat-app {
  height: calc(100vh - var(--sq-chrome-h, 64px));
  height: calc(100dvh - var(--sq-chrome-h, 64px));
}

/* ---------- 发文流容器(在中列内,不再自己居中) ---------- */
.sq-main { padding: 0 16px 80px; }

/* 输入时的 #话题 / $代码 着色(糖哥 2026-08-30):
   镜像层垫在 textarea 底下,textarea 文字透明、只留光标与选区。
   两层必须严丝合缝 —— 字体相关属性由 JS 从 textarea 的计算样式逐项抄过去,
   这里只管定位与层级,别在这儿给镜像另写字体,那样一定会错位。 */
.sq-hl-wrap { position: relative; }
.sq-hl-layer {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  overflow: hidden; color: var(--text-main, #f4f5f7);
  white-space: pre-wrap; word-break: break-word;
}
.sq-hl-input {
  position: relative; z-index: 1;
  color: transparent !important; background: transparent !important;
  caret-color: var(--text-main, #f4f5f7);
}
.sq-hl-input::placeholder { color: var(--text-muted, #6b7080); }
.sq-hl-input::selection { background: rgba(29,155,240,.35); color: transparent; }
/* 镜像里的话题与资产代码,用的就是发布后那两套颜色 */
.sq-hl-layer .sq-tag { color: #1d9bf0; }
.sq-hl-layer .sq-cash { color: var(--accent, #0f1115); font-weight: 700; }

/* ---------- 发文框 ---------- */
.sq-composer {
  display: flex; gap: 12px; padding: 16px 4px;
  border-bottom: 1px solid var(--line-soft, rgba(255,255,255,0.06));
}
.sq-composer-body { flex: 1; min-width: 0; }
.sq-composer textarea {
  width: 100%; border: 0; background: transparent; resize: none;
  font: inherit; font-size: calc(17px * var(--sv-font-scale, 1)); line-height: 1.5; color: var(--text-main, #f4f5f7);
  padding: 6px 0; outline: none; min-height: 52px;
}
.sq-composer textarea::placeholder { color: var(--text-muted, #6b7080); }
.sq-composer-foot { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.sq-tools { display: flex; gap: 2px; margin-right: auto; }
.sq-tool {
  display: grid; place-items: center; width: 32px; height: 32px;
  border: 0; border-radius: 50%; background: transparent; cursor: pointer;
  color: var(--accent, #0f1115);
}
.sq-tool:hover { background: var(--accent-soft, rgba(255,255,255,0.07)); }
.sq-count { font-size: calc(12px * var(--sv-font-scale, 1)); color: var(--text-muted, #6b7080); font-variant-numeric: tabular-nums; }
.sq-count.warn { color: var(--warn, #f0b90b); }
.sq-count.over { color: var(--down, #f6465d); }
.sq-send {
  border: 0; border-radius: 999px; padding: 8px 20px; cursor: pointer;
  font-size: calc(14px * var(--sv-font-scale, 1)); font-weight: 700;
  background: var(--accent, #0f1115); color: var(--accent-contrast, #fff);
}
.sq-send:disabled { opacity: .45; cursor: not-allowed; }

/* 未登录提示条 */
.sq-guest {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 14px 0; padding: 14px 16px; border-radius: 12px;
  background: var(--bg-card, #14181f); border: 1px solid var(--line-soft, rgba(255,255,255,0.06));
  font-size: calc(13.5px * var(--sv-font-scale, 1)); color: var(--text-secondary, #b0b4bd);
}
.sq-guest-btn {
  margin-left: auto; text-decoration: none; border-radius: 999px; padding: 7px 16px;
  font-size: calc(13px * var(--sv-font-scale, 1)); font-weight: 700; background: var(--accent, #0f1115); color: var(--accent-contrast, #fff);
}

/* ---------- 帖子卡片 ---------- */
.sq-feed { display: flex; flex-direction: column; }
.sq-post {
  display: flex; gap: 12px; padding: 12px 4px;
  border-bottom: 1px solid var(--line-soft, rgba(255,255,255,0.06));
}
.sq-post.sq-reply { padding-left: 16px; }
.sq-avatar {
  flex: none; display: grid; place-items: center;
  width: var(--sq-avatar); height: var(--sq-avatar); border-radius: 50%;
  background: var(--accent-soft, rgba(255,255,255,0.08)); color: var(--accent, #0f1115);
  font-size: calc(16px * var(--sv-font-scale, 1)); font-weight: 700; user-select: none;
}
/* 发文框不显示头像(糖哥 2026-07-25) */
.sq-composer .sq-avatar { display: none; }
.sq-post-body { flex: 1; min-width: 0; }
.sq-relay { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; font-size: calc(12.5px * var(--sv-font-scale, 1)); color: var(--text-muted, #6b7080); }
.sq-relay svg { width: 14px; height: 14px; flex: none; }
.sq-head { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.sq-name { font-size: var(--sq-fs-name); font-weight: 700; color: var(--text-main, #f4f5f7); }
.sq-badge { font-size: calc(10px * var(--sv-font-scale, 1)); font-weight: 700; padding: 1px 6px; border-radius: 999px; background: var(--warn, #f0b90b); color: #16181f; }
.sq-time { font-size: var(--sq-fs-meta); color: var(--text-muted, #6b7080); }
.sq-pin { font-size: calc(11px * var(--sv-font-scale, 1)); color: var(--warn, #f0b90b); }
.sq-menu { margin-left: auto; border: 0; background: transparent; color: var(--text-muted, #6b7080); cursor: pointer; font-size: calc(16px * var(--sv-font-scale, 1)); line-height: 1; padding: 0 4px; }
.sq-menu:hover { color: var(--down, #f6465d); }
.sq-text { margin: 4px 0 0; font-size: var(--sq-fs-body); line-height: var(--sq-lh-body); color: var(--text-main, #f4f5f7); white-space: pre-wrap; word-break: break-word; }
.sq-deleted { color: var(--text-muted, #6b7080); font-style: italic; }

/* 附件:配图 + 行情卡片 */
.sq-media { display: grid; gap: 2px; margin-top: 10px; border-radius: 16px; overflow: hidden; }
.sq-media[data-n="1"] { grid-template-columns: 1fr; }
.sq-media[data-n="2"] { grid-template-columns: 1fr 1fr; aspect-ratio: 16 / 9; }
.sq-media[data-n="3"] { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; aspect-ratio: 16 / 9; }
.sq-media[data-n="3"] img:first-child { grid-row: 1 / span 2; }
.sq-media[data-n="4"] { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; aspect-ratio: 16 / 9; }
.sq-media img { width: 100%; height: 100%; min-width: 0; min-height: 0; object-fit: cover; display: block; cursor: zoom-in; }
.sq-media[data-n="1"] img { height: auto; max-height: 510px; }
.sq-quote-card {
  display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 10px 14px;
  border-radius: 12px; border: 1px solid var(--line-soft, rgba(255,255,255,0.08));
  background: var(--bg-card, #14181f); text-decoration: none;
}
.sq-quote-sym { font-weight: 800; font-size: calc(14px * var(--sv-font-scale, 1)); color: var(--text-main, #f4f5f7); }
.sq-quote-px { font-family: var(--font-mono, ui-monospace, monospace); font-size: calc(14px * var(--sv-font-scale, 1)); color: var(--text-secondary, #b0b4bd); }
.sq-quote-chg { margin-left: auto; font-family: var(--font-mono, ui-monospace, monospace); font-size: calc(13px * var(--sv-font-scale, 1)); font-weight: 700; }
.sq-quote-chg.up { color: var(--up, #2ebd85); }
.sq-quote-chg.down { color: var(--down, #f6465d); }

/* 引用转发里嵌的原帖 */
.sq-origin {
  margin-top: 10px; padding: 10px 12px; border-radius: 12px;
  border: 1px solid var(--line-soft, rgba(255,255,255,0.09));
  cursor: pointer;
}
.sq-origin:hover { background: var(--bg-card, rgba(255,255,255,0.02)); }
.sq-origin .sq-head { font-size: calc(13px * var(--sv-font-scale, 1)); }
.sq-origin .sq-text { font-size: var(--sq-fs-meta); }
.sq-origin .sq-media[data-n="1"] img { max-height: 360px; }

/* 操作行 */
.sq-acts { display: flex; align-items: center; gap: 4px; margin-top: 10px; }
.sq-act {
  display: inline-flex; align-items: center; gap: 6px;
  border: 0; background: transparent; cursor: pointer; padding: 5px 10px; border-radius: 999px;
  font-size: var(--sq-fs-act); color: var(--text-muted, #6b7080); font-variant-numeric: tabular-nums;
}
.sq-act:hover { background: rgba(255,255,255,0.06); color: var(--text-main, #f4f5f7); }
.sq-act.on { color: var(--accent, #0f1115); }
.sq-act.like.on { color: var(--down, #f6465d); }
/* 点赞后桃心填成实心(糖哥 2026-08-24):此前只换了描边颜色,空心红在深色底上一眼看不出
   点没点上 —— 与书签 .sq-act.mark.on 的实心处理保持同一套手感。
   点上的瞬间给一次极轻的回弹,让"这一下点中了"有回执;关掉动效偏好的人不播。 */
.sq-act.like.on svg { fill: currentColor; }
.sq-act.like.on.just svg { animation: sqLikePop .28s ease-out; }
.sq-act svg { width: 18px; height: 18px; }
@keyframes sqLikePop { 0% { transform: scale(.72); } 60% { transform: scale(1.16); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .sq-act.like.on.just svg { animation: none; } }

/* 展开的评论区 */
.sq-replies { margin-top: 10px; border-left: 2px solid var(--line-soft, rgba(255,255,255,0.08)); padding-left: 12px; }
/* 回复框(糖哥 2026-08-30:「评论区的回复只能发文字,你应该做成和 X 一样的」)
   X 的形状:上面标出回复给谁 → 多行输入 → 附件预览 → 底下一排工具 + 右侧「回复」。
   工具按钮直接复用发文框的 .sq-tool,两处形态一致。 */
.sq-reply-box { margin-top: 10px; }
.sq-reply-to { font-size: calc(13px * var(--sv-font-scale, 1)); color: var(--text-muted, #6b7080); margin-bottom: 6px; }
.sq-reply-to b { color: var(--sq-link, #1d9bf0); font-weight: 400; }
.sq-reply-box textarea {
  display: block; width: 100%; min-height: 40px; padding: 9px 14px; border-radius: 16px;
  font: inherit; font-size: var(--sq-fs-body); line-height: var(--sq-lh-body); resize: none; overflow-y: auto;
  background: var(--bg-tertiary, rgba(255,255,255,0.05)); color: var(--text-main, #f4f5f7);
  border: 1px solid var(--line-soft, rgba(255,255,255,0.08));
}
.sq-reply-box textarea:focus { outline: none; border-color: var(--sq-link, #1d9bf0); }
.sq-reply-box textarea::placeholder { color: var(--text-muted, #6b7080); }
.sq-reply-foot { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.sq-reply-tools { display: flex; gap: 2px; margin-right: auto; }
.sq-reply-send {
  border: 0; border-radius: 999px; padding: 7px 18px; cursor: pointer;
  font-size: calc(13.5px * var(--sv-font-scale, 1)); font-weight: 700; background: var(--accent, #0f1115); color: var(--accent-contrast, #fff);
}
.sq-reply-send:disabled { opacity: .45; cursor: default; }
/* 附件预览里的行情卡:没有图,拿代码本身当缩略图 */
.sq-reply-thumb.sq-reply-quote {
  display: inline-flex; align-items: center; justify-content: center;
  width: auto; min-width: 62px; height: 40px;
  padding: 0 24px 0 10px; border-radius: 10px; font-size: calc(13px * var(--sv-font-scale, 1)); font-weight: 800;
  color: var(--accent, #0f1115); background: var(--accent-soft, rgba(255,255,255,0.08));
}

/* 待发布附件预览 */
.sq-attach { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.sq-attach-item { position: relative; border-radius: 10px; overflow: hidden; border: 1px solid var(--line-soft, rgba(255,255,255,0.08)); }
.sq-attach-item img { display: block; width: 92px; height: 92px; object-fit: cover; }
.sq-attach-quote {
  display: grid; place-items: center; min-width: 92px; height: 40px; padding: 0 28px 0 12px;
  font-size: calc(13px * var(--sv-font-scale, 1)); font-weight: 700; color: var(--accent, #0f1115); background: var(--accent-soft, rgba(255,255,255,0.08));
}
.sq-attach-item button {
  position: absolute; top: 3px; right: 3px; width: 20px; height: 20px;
  border: 0; border-radius: 50%; cursor: pointer; line-height: 1;
  background: rgba(0,0,0,0.62); color: #fff; font-size: calc(13px * var(--sv-font-scale, 1));
}

/* 正文里的网址与 @提及(糖哥 2026-08-30 体检补齐:此前网址是死文字、@ 谁都点不动) */
.sq-url { color: var(--sq-link, #1d9bf0); text-decoration: none; word-break: break-all; }
.sq-url:hover { text-decoration: underline; }
.sq-at { color: var(--sq-link, #1d9bf0); cursor: pointer; }
.sq-at:hover { text-decoration: underline; }
/* 输入镜像里的 @ 也是同一个颜色,输入前后一个样 */
.sq-hl-layer .sq-at, .sq-hl-layer .sq-url { color: var(--sq-link, #1d9bf0); }

/* 打 @ 时的人名候选(对标 X:↑↓ 选、Enter 补全) */
.sq-at-box {
  position: fixed; z-index: 9990; width: 260px; padding: 6px; border-radius: 12px;
  background: var(--bg-elevated, #16181f); border: 1px solid var(--line-strong, rgba(255,255,255,.14));
  box-shadow: 0 14px 40px rgba(0,0,0,.45); max-height: 268px; overflow-y: auto;
}
.sq-at-item {
  display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 8px;
  border: 0; border-radius: 9px; background: transparent; cursor: pointer; text-align: left;
}
.sq-at-item:hover, .sq-at-item.on { background: var(--accent-soft, rgba(255,255,255,0.08)); }
.sq-avatar.sq-at-av { width: 32px; height: 32px; font-size: calc(13px * var(--sv-font-scale, 1)); }
.sq-at-info { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.sq-at-info b { font-size: calc(14px * var(--sv-font-scale, 1)); font-weight: 700; color: var(--text-main, #f4f5f7); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sq-at-info em { font-size: calc(12.5px * var(--sv-font-scale, 1)); font-style: normal; color: var(--text-muted, #6b7080); }

/* 正文里的 $代码 与 #话题 */
.sq-cash { color: var(--accent, #0f1115); text-decoration: none; font-weight: 700; }
.sq-cash:hover { text-decoration: underline; }
.sq-tag { color: #1d9bf0; font-weight: 600; cursor: pointer; }
.sq-tag:hover { text-decoration: underline; }

.sq-empty { padding: 40px 12px; text-align: center; color: var(--text-muted, #6b7080); font-size: calc(14px * var(--sv-font-scale, 1)); }
.sq-more {
  display: block; width: 100%; margin: 14px 0; padding: 11px; cursor: pointer;
  border-radius: 12px; font-size: calc(13.5px * var(--sv-font-scale, 1));
  background: transparent; color: var(--text-secondary, #b0b4bd);
  border: 1px solid var(--line-soft, rgba(255,255,255,0.08));
}
.sq-more:hover { border-color: var(--accent-line, rgba(255,255,255,0.16)); color: var(--text-main, #f4f5f7); }

/* 中等屏:先收掉右栏,左导航 + 内容两栏 */
@media (max-width: 1080px) {
  .sq-shell { grid-template-columns: 210px minmax(0, 1fr); max-width: none; }
  .sq-aside { display: none; }
  .sq-rail { padding: 12px 8px; }
  .sq-nav-item { font-size: calc(16px * var(--sv-font-scale, 1)); }
}
/* 窄屏:左导航变横向顶栏(贴头部下方),内容单列铺满 */
@media (max-width: 720px) {
  .sq-shell, .sq-shell.chat-mode { grid-template-columns: 1fr; }
  .sq-rail {
    position: sticky; top: var(--sq-header-h, 56px); z-index: 60; height: auto;
    flex-direction: row; gap: 2px; padding: 5px 8px; overflow-x: auto;
    background: var(--bg-core, #0b0e13); border-bottom: 1px solid var(--line-soft, rgba(255,255,255,0.06));
  }
  .sq-nav-item { width: auto; flex: 0 0 auto; padding: 9px 15px; font-size: calc(14px * var(--sv-font-scale, 1)); border-radius: 999px; }
  .sq-rail-post { display: none; } /* 窄屏用发文框本身发帖,不占顶栏 */
  .sq-center { border: 0; min-height: 0; }
  .sq-main { padding: 0 10px 70px; }
  .sq-composer textarea { font-size: calc(16px * var(--sv-font-scale, 1)); } /* iOS 低于 16px 会自动放大页面 */
  .sq-avatar { width: 36px; height: 36px; font-size: calc(14px * var(--sv-font-scale, 1)); }
  /* 互动条在 390 宽下会顶出屏幕(图标调大到 18 之后 padding 没跟着收)——
     收紧内边距并允许均分,通知与书签面板里的卡片同理(糖哥 2026-08-30 体检发现) */
  .sq-acts { gap: 0; justify-content: space-between; }
  .sq-act { padding: 5px 6px; }
  .sq-act svg { width: 17px; height: 17px; }
  .sq-notif { padding: 12px 10px; gap: 8px; }
  .sq-notif-thumb { width: 46px; height: 46px; }
}

/* ==== 推文区扩充:标签页 / 探索 / 个人资料(糖哥 2026-08-04,对标 X) ==== */
/* 标签页条:X 式底部指示线,选中项加粗 + 下划线 */
.sq-feedtabs {
  display: flex; align-items: stretch;
  border-bottom: 1px solid var(--line-soft, rgba(255,255,255,0.08));
}
.sq-ft {
  flex: 1; position: relative; padding: 13px 6px; cursor: pointer;
  background: transparent; border: none; font-size: calc(13px * var(--sv-font-scale, 1));
  color: var(--text-muted, #8a8f9c); transition: background .15s, color .15s;
}
.sq-ft:hover { background: var(--accent-soft, rgba(255,255,255,0.05)); color: var(--text-primary, #e8eaed); }
.sq-ft.on { color: var(--text-primary, #e8eaed); font-weight: 700; }
.sq-ft.on::after {
  content: ''; position: absolute; left: 50%; bottom: -1px; transform: translateX(-50%);
  width: 56px; max-width: 70%; height: 3px; border-radius: 3px;
  background: var(--accent, #1d9bf0);
}
/* 探索搜索框 */
.sq-explore-search { padding: 10px 14px; border-bottom: 1px solid var(--line-soft, rgba(255,255,255,0.08)); }
.sq-explore-search input {
  width: 100%; padding: 9px 13px; border-radius: 999px; font-size: calc(13px * var(--sv-font-scale, 1));
  background: var(--bg-tertiary, rgba(255,255,255,0.06));
  color: var(--text-primary, #e8eaed);
  border: 1px solid transparent; outline: none;
}
.sq-explore-search input:focus {
  background: transparent; border-color: var(--accent, #1d9bf0);
}
.sq-explore-search input::placeholder { color: var(--text-muted, #8a8f9c); }
/* 个人资料头部:横幅 + 头像 + 统计(X 式) */
/* 横幅与头像比例对齐 X(糖哥 2026-08-04):
   X 的横幅是 3:1(1500×500),头像直径约横幅宽度的 22%,且一半压在横幅上。
   原来写死 118px 高,在 640px 宽的中列里约 5.4:1 —— 太扁,头像也只占 10%,整体不像。
   改用 aspect-ratio + 百分比,任何宽度下比例都与 X 一致。 */
.sq-profile-banner {
  position: relative;
  aspect-ratio: 3 / 1;
  background: linear-gradient(120deg, rgba(29,155,240,.28), rgba(120,86,255,.22));
  background-size: cover; background-position: center;
}
.sq-profile-body { position: relative; padding: 0 16px 14px; }
.sq-profile-av {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22%; aspect-ratio: 1; height: auto;
  margin-top: -11%;            /* 直径的一半:正好一半压在横幅上,与 X 一致 */
  border-radius: 50%;
  font-size: clamp(20px, 4.2vw, 34px); font-weight: 700; overflow: hidden;
  background: var(--bg-elevated, #16181f); color: var(--text-primary, #e8eaed);
  border: 4px solid var(--bg-primary, #0b0e13);
}
.sq-profile-av img { width: 100%; height: 100%; object-fit: cover; }
.sq-profile-name { margin-top: 8px; font-size: calc(18px * var(--sv-font-scale, 1)); font-weight: 800; color: var(--text-primary, #e8eaed); }
.sq-profile-handle { margin-top: 2px; font-size: calc(13px * var(--sv-font-scale, 1)); color: var(--text-muted, #8a8f9c); }
.sq-profile-stats { display: flex; gap: 18px; margin-top: 11px; font-size: calc(13px * var(--sv-font-scale, 1)); color: var(--text-muted, #8a8f9c); }
.sq-profile-stats b { color: var(--text-primary, #e8eaed); margin-right: 3px; }
@media (max-width: 720px) {
  /* 比例由 aspect-ratio 保证,移动端不再写死高度 */
  .sq-profile-av { font-size: calc(20px * var(--sv-font-scale, 1)); border-width: 3px; }
  .sq-ft { font-size: calc(12px * var(--sv-font-scale, 1)); padding: 11px 4px; }
}

/* ==== 通知面板(糖哥 2026-08-04) ==== */
/* 侧栏未读角标:对标 X 那个小圆点,但我们直接给数字更明确 */
.sq-nav-badge {
  min-width: 17px; height: 17px; padding: 0 5px; margin-left: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: calc(10px * var(--sv-font-scale, 1)); font-style: normal; font-weight: 700; line-height: 1;
  border-radius: 999px; background: var(--down-red, #f6465d); color: #fff;
}
.sq-nav-badge[hidden] { display: none; }
.sq-notif-bar {
  display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid var(--line-soft, rgba(255,255,255,0.08));
}
.sq-notif-bar .sq-feedtabs { flex: 1; border-bottom: none; }
.sq-notif-readall {
  flex: 0 0 auto; margin-right: 12px; padding: 5px 11px; border-radius: 999px;
  font-size: calc(12px * var(--sv-font-scale, 1)); cursor: pointer; background: transparent;
  color: var(--text-muted, #8a8f9c);
  border: 1px solid var(--line-strong, rgba(255,255,255,0.14));
}
.sq-notif-readall:hover { color: var(--text-primary, #e8eaed); border-color: var(--accent, #1d9bf0); }
/* 通知条目 */
.sq-notif {
  display: flex; align-items: flex-start; gap: 10px; padding: 13px 15px; cursor: pointer;
  border-bottom: 1px solid var(--line-soft, rgba(255,255,255,0.06));
  transition: background .15s;
}
.sq-notif:hover { background: var(--accent-soft, rgba(255,255,255,0.04)); }
/* 未读:左侧竖条 + 轻底色,一眼扫出来 */
.sq-notif.unread { background: rgba(29,155,240,0.06); box-shadow: inset 3px 0 0 var(--accent, #1d9bf0); }
.sq-notif-main { flex: 1; min-width: 0; }
.sq-notif-top { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.sq-notif-top b { font-size: calc(13.5px * var(--sv-font-scale, 1)); font-weight: 700; color: var(--text-primary, #e8eaed); }
/* 标的标签:我们的通知带 symbol,盯盘时一眼看出是哪个标的(X 没有这层) */
.sq-notif-sym {
  padding: 1px 7px; border-radius: 4px; font-size: calc(11px * var(--sv-font-scale, 1)); font-weight: 700;
  background: var(--accent-soft, rgba(29,155,240,0.14)); color: var(--accent, #1d9bf0);
}
.sq-notif-body { margin: 5px 0 0; font-size: calc(13px * var(--sv-font-scale, 1)); line-height: 1.55; color: var(--text-muted, #8a8f9c); }

/* ==== 通知项对齐 X(糖哥 2026-08-30:「点开这些细分项时,要显示具体信息」)====
   紧凑行:类型图标 + 头像 + 一句话 + 原帖摘要 + 右侧配图缩略图,整行可点。
   回复类另走 .sq-notif-card:里面直接嵌一张完整推文卡。 */
.sq-notif-icon { flex: 0 0 auto; display: grid; place-items: center; width: 26px; height: 26px; margin-top: 1px; }
.sq-notif-icon svg { width: 20px; height: 20px; }
.sq-notif-icon.like { color: var(--down, #f6465d); }
.sq-notif-icon.like svg { fill: currentColor; }
.sq-notif-icon.reply, .sq-notif-icon.follow, .sq-notif-icon.support, .sq-notif-icon.ann { color: var(--sq-link, #1d9bf0); }
.sq-notif-icon.repost { color: var(--up, #2ebd85); }
.sq-notif-avs { display: flex; margin-bottom: 6px; }
.sq-avatar.sq-notif-av { width: 30px; height: 30px; font-size: calc(13px * var(--sv-font-scale, 1)); }
.sq-notif-excerpt {
  margin: 4px 0 0; font-size: calc(13px * var(--sv-font-scale, 1)); line-height: 1.55; color: var(--text-muted, #8a8f9c);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}
.sq-notif-thumb {
  flex: 0 0 auto; width: 56px; height: 56px; border-radius: 10px; object-fit: cover;
  border: 1px solid var(--line-soft, rgba(255,255,255,0.08));
}
.sq-notif.openable { cursor: pointer; }
/* 回复类:整张推文卡,上面压一行"谁回复了你" */
.sq-notif-card { display: block; padding: 10px 4px 0; }
.sq-notif-lead {
  display: flex; align-items: center; gap: 8px; padding: 0 0 2px 2px;
  font-size: calc(13px * var(--sv-font-scale, 1)); color: var(--text-muted, #8a8f9c);
}
.sq-notif-lead b { font-size: calc(13.5px * var(--sv-font-scale, 1)); font-weight: 700; color: var(--text-main, #f4f5f7); }
.sq-notif-lead .sq-notif-time { margin-left: auto; }
.sq-notif-lead .sq-notif-icon { width: 20px; height: 20px; margin: 0; }
.sq-notif-lead .sq-notif-icon svg { width: 16px; height: 16px; }
.sq-notif-card .sq-post { border-bottom: 0; padding-top: 6px; cursor: pointer; }
.sq-notif-time { flex: 0 0 auto; font-size: calc(11.5px * var(--sv-font-scale, 1)); color: var(--text-muted, #8a8f9c); font-variant-numeric: tabular-nums; }

/* ==== 编辑个人资料(糖哥 2026-08-04,对标 X 的编辑弹窗) ==== */
.sq-edit-profile {
  position: absolute; right: 14px; bottom: -46px; z-index: 3;
  padding: 7px 16px; border-radius: 999px; font-size: calc(13px * var(--sv-font-scale, 1)); font-weight: 700; cursor: pointer;
  background: transparent; color: var(--text-primary, #e8eaed);
  border: 1px solid var(--line-strong, rgba(255,255,255,0.3));
}
.sq-edit-profile:hover { background: var(--accent-soft, rgba(255,255,255,0.08)); }
.sq-edit-profile[hidden] { display: none; }

.sq-profile-bio { margin: 9px 0 0; font-size: calc(14px * var(--sv-font-scale, 1)); line-height: 1.6; color: var(--text-primary, #e8eaed); white-space: pre-wrap; }
/* 弹窗 */
.sq-editmask {
  position: fixed; inset: 0; z-index: 9999; display: flex; align-items: flex-start; justify-content: center;
  padding: 6vh 16px; background: transparent; /* 遮罩全透明(糖哥 2026-08-10) */ overflow-y: auto;
}
/* 弹窗高度必须封顶(糖哥 2026-09-01「间隔的太开了,体验不太好」的另一半原因)。
   改造前这里没有 max-height,内容有多高弹窗就有多高 —— 实测 2199px,
   等于把整个表单铺成一条长卷,"保存"按钮被推到视口外,用户得先滚到底才能存。
   X 的做法:弹窗封顶、**头部固定**、只有内容区滚动,所以保存键永远在手边。
   ⚠️ 只加 max-height 不给内容区 overflow 会把最后一个字段直接裁掉(站内踩过这个坑),
      所以三件事必须一起做:flex 纵向 + 头部 flex:none + 内容区 flex:1 且可滚。 */
.sq-editbox {
  width: 100%; max-width: 520px; border-radius: 16px; overflow: hidden;
  max-height: 88vh; display: flex; flex-direction: column;
  background: var(--bg-elevated, #16181f);
  border: 1px solid var(--line-strong, rgba(255,255,255,0.12));
  box-shadow: 0 18px 50px rgba(0,0,0,0.5);
}
.sq-editbox > .sq-edit-head { flex: none; }
/* ⚠️ 内容区也用 flex 列:这个弹窗的 HTML 由模板字符串生成,标签之间的换行与缩进
   会变成**空白文本节点**。在 block 容器里它们每个都撑出一行(实测横幅那一格
   因此从 140px 涨到 248px)。flex 容器不为空白文本节点生成行框,
   在容器这一层修一次,比逐个子块去围堵可靠。 */
.sq-editbox > .sq-edit-body { flex: 1 1 auto; overflow-y: auto; min-height: 0; display: flex; flex-direction: column; }
.sq-edit-head {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px;
  border-bottom: 1px solid var(--line-soft, rgba(255,255,255,0.08));
}
.sq-edit-head b { flex: 1; font-size: calc(16px * var(--sv-font-scale, 1)); }
.sq-edit-x {
  width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: calc(15px * var(--sv-font-scale, 1));
  background: transparent; color: var(--text-primary, #e8eaed); border: none;
}
.sq-edit-x:hover { background: var(--accent-soft, rgba(255,255,255,0.09)); }
.sq-edit-save {
  padding: 6px 17px; border-radius: 999px; font-size: calc(13px * var(--sv-font-scale, 1)); font-weight: 800; cursor: pointer;
  background: var(--text-primary, #e8eaed); color: var(--bg-core, #0b0e13); border: none;
}
.sq-edit-save:hover { opacity: .88; }
.sq-edit-body { padding: 14px 16px 16px; }
.sq-edit-avwrap { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.sq-edit-av {
  width: 72px; height: 72px; border-radius: 50%; overflow: hidden; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: calc(27px * var(--sv-font-scale, 1)); font-weight: 700;
  background: var(--bg-tertiary, #101217); color: var(--text-primary, #e8eaed);
}
.sq-edit-av img { width: 100%; height: 100%; object-fit: cover; }
.sq-edit-avbtn {
  padding: 7px 15px; border-radius: 999px; font-size: calc(13px * var(--sv-font-scale, 1)); cursor: pointer;
  background: transparent; color: var(--text-primary, #e8eaed);
  border: 1px solid var(--line-strong, rgba(255,255,255,0.22));
}
.sq-edit-avbtn:hover { background: var(--accent-soft, rgba(255,255,255,0.08)); }
/* 编辑资料的行距(糖哥 2026-09-01:「推文编辑资料间隔的太开了,体验不太好,
   请直接参考 x 的编辑资料」)。X 的编辑资料是一屏能看完的紧凑表单:
   字段间距 12px 而不是 16、标签贴着输入框(3px)、输入框内边距收到 8/12。
   加上多出来的「@用户名」一栏,不收紧的话这个弹窗要滚两屏。 */
/* ⚠️ display:flex 而不是 block —— 这一条是「间隔太开」的真正根源。
   模板字符串里的换行与缩进会在 label 内产生**空白文本节点**,而 block 容器里
   每个空白文本节点都会撑出一个行框(实测 line-height 21.6px 各占一行):
   一个「标签 19px + 输入框 34px」本该 56px 的字段,实测被撑到 **164px**,
   七个字段就是多出近 800px —— 弹窗要滚 1400px 才见底。
   flex 列布局不为空白文本节点生成行框,高度回到内容本身。 */
.sq-edit-field { display: flex; flex-direction: column; position: relative; margin-bottom: 12px; }
.sq-edit-field > span { display: block; margin-bottom: 3px; font-size: calc(12px * var(--sv-font-scale, 1)); color: var(--text-muted, #8a8f9c); }
/* @用户名:前缀 @ 与输入框拼成一个整体,像 X 那样让人一眼看出这是句柄不是昵称 */
.sq-edit-prefixwrap { display: flex; align-items: stretch; }
.sq-edit-prefix {
  display: grid; place-items: center; padding: 0 10px; font-style: normal; font-size: calc(14px * var(--sv-font-scale, 1));
  color: var(--text-muted, #8a8f9c);
  border: 1px solid var(--line-strong, rgba(255,255,255,0.16)); border-right: none;
  border-radius: 8px 0 0 8px; background: transparent;
}
.sq-edit-prefixwrap input { border-radius: 0 8px 8px 0 !important; }
.sq-edit-hint { display: block; margin-top: 3px; font-size: calc(11.5px * var(--sv-font-scale, 1)); font-style: normal; color: var(--text-muted, #8a8f9c); }
.sq-edit-hint.bad { color: var(--down-red, #f6465d); }
.sq-edit-field input, .sq-edit-field textarea {
  width: 100%; padding: 8px 12px; border-radius: 8px; font-size: calc(14px * var(--sv-font-scale, 1)); resize: vertical;
  background: transparent; color: var(--text-primary, #e8eaed);
  border: 1px solid var(--line-strong, rgba(255,255,255,0.16)); outline: none;
}
.sq-edit-field input:focus, .sq-edit-field textarea:focus { border-color: var(--accent, #1d9bf0); }
.sq-edit-count { position: absolute; right: 4px; bottom: -15px; font-size: calc(11px * var(--sv-font-scale, 1)); font-style: normal; color: var(--text-muted, #8a8f9c); }
.sq-edit-tip { margin-top: 6px; font-size: calc(12.5px * var(--sv-font-scale, 1)); color: var(--text-muted, #8a8f9c); }
.sq-edit-tip.bad { color: var(--down-red, #f6465d); }
@media (max-width: 560px) {
  .sq-editmask { padding: 0; }
  .sq-editbox { max-width: none; min-height: 100vh; border-radius: 0; border: none; }
}

/* ==== 右栏三块(糖哥 2026-08-04,对标 X 右栏) ==== */
.sq-aside-search { margin-bottom: 14px; }
.sq-aside-search input {
  width: 100%; padding: 9px 14px; border-radius: 999px; font-size: calc(13px * var(--sv-font-scale, 1)); outline: none;
  background: var(--bg-tertiary, rgba(255,255,255,0.06));
  color: var(--text-primary, #e8eaed); border: 1px solid transparent;
}
.sq-aside-search input:focus { background: transparent; border-color: var(--accent, #1d9bf0); }
.sq-aside-search input::placeholder { color: var(--text-muted, #8a8f9c); }
.sq-aside-head { display: flex; align-items: baseline; gap: 8px; padding: 12px 14px 8px; font-size: calc(15px * var(--sv-font-scale, 1)); font-weight: 800; }
.sq-aside-sub { font-size: calc(11px * var(--sv-font-scale, 1)); font-weight: 500; font-style: normal; color: var(--text-muted, #8a8f9c); }
.sq-aside-empty { padding: 12px 14px 16px; font-size: calc(12.5px * var(--sv-font-scale, 1)); color: var(--text-muted, #8a8f9c); }
/* 推荐作者 */
.sq-person { display: flex; align-items: center; gap: 10px; padding: 9px 14px; transition: background .15s; }
.sq-person:hover { background: var(--accent-soft, rgba(255,255,255,0.04)); }
.sq-person-av {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: calc(15px * var(--sv-font-scale, 1)); font-weight: 700;
  background: var(--bg-tertiary, #101217); color: var(--text-primary, #e8eaed);
}
.sq-person-av img { width: 100%; height: 100%; object-fit: cover; }
.sq-person-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.sq-person-info b { font-size: calc(13.5px * var(--sv-font-scale, 1)); color: var(--text-primary, #e8eaed); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sq-person-info em { font-size: calc(11.5px * var(--sv-font-scale, 1)); font-style: normal; color: var(--text-muted, #8a8f9c); }
.sq-follow {
  flex: 0 0 auto; padding: 6px 15px; border-radius: 999px; font-size: calc(12.5px * var(--sv-font-scale, 1)); font-weight: 700; cursor: pointer;
  background: var(--text-primary, #e8eaed); color: var(--bg-core, #0b0e13); border: none;
}
.sq-follow:hover { opacity: .86; }
.sq-follow.on {
  background: transparent; color: var(--text-primary, #e8eaed);
  border: 1px solid var(--line-strong, rgba(255,255,255,0.28));
}
.sq-follow.on:hover { color: var(--down-red, #f6465d); border-color: var(--down-red, #f6465d); }
/* 涨跌榜 */
.sq-trend {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 14px; text-decoration: none; transition: background .15s;
}
.sq-trend:hover { background: var(--accent-soft, rgba(255,255,255,0.04)); }
.sq-trend-l { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sq-trend-l b { font-size: calc(13.5px * var(--sv-font-scale, 1)); color: var(--text-primary, #e8eaed); }
.sq-trend-l em { font-size: calc(11px * var(--sv-font-scale, 1)); font-style: normal; color: var(--text-muted, #8a8f9c); }
.sq-trend-pct { font-size: calc(13px * var(--sv-font-scale, 1)); font-weight: 700; font-variant-numeric: tabular-nums; }
.sq-trend-pct.up { color: var(--up-green, #2ebd85); }
.sq-trend-pct.down { color: var(--down-red, #f6465d); }

/* ==== 书签(糖哥 2026-08-04) ==== */
.sq-act.mark.on { color: var(--accent, #1d9bf0); }
.sq-act.mark.on svg { fill: currentColor; }
.sq-marks-head {
  display: flex; align-items: baseline; gap: 9px; padding: 15px 16px 13px;
  border-bottom: 1px solid var(--line-soft, rgba(255,255,255,0.08));
}
.sq-marks-head b { font-size: calc(17px * var(--sv-font-scale, 1)); font-weight: 800; }
.sq-marks-head em { font-size: calc(12.5px * var(--sv-font-scale, 1)); font-style: normal; color: var(--text-muted, #8a8f9c); }

/* ==== 编辑资料扩充:横幅 + 元信息(糖哥 2026-08-04) ==== */
/* flex 列同理:wrap 里「横幅 span + 更换按钮 label」之间的换行同样会撑出行框,
   实测让这一格从 140px 涨到 248px(按钮本身是 absolute,一点不占流,涨的全是空白行)。 */
.sq-edit-bannerwrap { position: relative; margin: -14px -16px 14px; display: flex; flex-direction: column; flex: none; }
.sq-edit-banner {
  /* 固定 140px 而不是 aspect-ratio:3/1 —— 后者在 520px 宽的弹窗里实测撑到 281px
     (span 上的 aspect-ratio 没按预期生效),把「全名」推到首屏之外,
     打开编辑资料第一眼看到的是一张空背景图而不是要改的字段。
     140px 是 X 编辑资料横幅的量级,仍然看得出构图,又不吃掉半屏。 */
  display: block; height: 140px; overflow: hidden;
  background: linear-gradient(120deg, rgba(29,155,240,.28), rgba(120,86,255,.22));
}
.sq-edit-banner img { width: 100%; height: 100%; object-fit: cover; }
.sq-edit-bannerbtn {
  position: absolute; right: 12px; bottom: 12px;
  padding: 6px 13px; border-radius: 999px; font-size: calc(12.5px * var(--sv-font-scale, 1)); cursor: pointer;
  background: rgba(0,0,0,0.55); color: #fff; border: 1px solid rgba(255,255,255,0.32);
  backdrop-filter: blur(3px);
}
.sq-edit-bannerbtn:hover { background: rgba(0,0,0,0.72); }
/* 资料卡上的 位置/网站/生日 */
.sq-profile-meta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 9px; font-size: calc(13px * var(--sv-font-scale, 1)); color: var(--text-muted, #8a8f9c); }
.sq-profile-meta[hidden] { display: none; }
.sq-profile-meta a { color: var(--accent, #1d9bf0); text-decoration: none; }
.sq-profile-meta a:hover { text-decoration: underline; }

/* ==== 有什么新鲜事:社区内容(话题 / 文章),不放行情 ==== */
.sq-fresh-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 9px 14px; text-align: left; cursor: pointer;
  background: transparent; border: none; text-decoration: none; transition: background .15s;
}
.sq-fresh-row:hover { background: var(--accent-soft, rgba(255,255,255,0.04)); }
.sq-fresh-l { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sq-fresh-l b {
  font-size: calc(13.5px * var(--sv-font-scale, 1)); color: var(--text-primary, #e8eaed);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sq-fresh-l em { font-size: calc(11px * var(--sv-font-scale, 1)); font-style: normal; color: var(--text-muted, #8a8f9c); }
.sq-fresh-n { flex: 0 0 auto; font-size: calc(12px * var(--sv-font-scale, 1)); color: var(--text-muted, #8a8f9c); font-variant-numeric: tabular-nums; }

/* ==== 推文「更多」菜单(糖哥 2026-08-04,对标 X 的 ··· 菜单) ==== */
.sq-menu {
  padding: 2px 6px; border-radius: 999px; line-height: 1; cursor: pointer;
  font-size: calc(15px * var(--sv-font-scale, 1)); letter-spacing: 1px;
  background: transparent; border: none; color: var(--text-muted, #8a8f9c);
  transition: background .15s, color .15s;
}
.sq-menu:hover { background: var(--accent-soft, rgba(29,155,240,0.12)); color: var(--accent, #1d9bf0); }
.sq-postmenu {
  position: fixed; z-index: 10000; min-width: 188px; padding: 6px;
  border-radius: 12px; overflow: hidden;
  background: var(--bg-elevated, #16181f);
  border: 1px solid var(--line-strong, rgba(255,255,255,0.12));
  box-shadow: 0 10px 34px rgba(0,0,0,0.5);
}
.sq-pm-item {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 10px 12px; border-radius: 8px; cursor: pointer; text-align: left;
  font-size: calc(13.5px * var(--sv-font-scale, 1)); font-weight: 600;
  background: transparent; border: none; color: var(--text-primary, #e8eaed);
  transition: background .12s;
}
.sq-pm-item:hover { background: var(--accent-soft, rgba(255,255,255,0.07)); }
.sq-pm-item svg { flex: 0 0 auto; opacity: .85; }
/* 删除用红色,与 X 一致 —— 破坏性操作要一眼认出来。
   注意:本站 --down-red 被定义成绿色(中文习惯 跌=绿),不能引用它,否则「删除」会变绿。 */
.sq-pm-item.danger { color: #f6465d; }
.sq-pm-item.danger:hover { background: rgba(246,70,93,0.12); }
/* 删除项右侧的快捷键提示(空格) */
.sq-pm-key {
  margin-left: auto; font-size: calc(11px * var(--sv-font-scale, 1)); font-weight: 600; line-height: 1.5;
  color: var(--text-muted, #8a8f9c); background: var(--accent-soft, rgba(255,255,255,0.06));
  border: 1px solid var(--line-soft, rgba(255,255,255,0.14)); border-radius: 5px; padding: 1px 7px; letter-spacing: .3px;
}

/* 无限滚动哨兵:不占视觉,只作为"滚到底了"的触发点 */
.sq-sentinel { height: 1px; margin: 0; padding: 0; }

/* ===== 可点击身份(头像/用户名 → 公开主页,2026-08-05)===== */
[data-uid-open] { cursor: pointer; }
.sq-name[data-uid-open]:hover { text-decoration: underline; }
.sq-avatar[data-uid-open]:hover { filter: brightness(1.12); }
.sq-person { cursor: pointer; }

/* ===== 他人公开主页 / 推文详情弹层 ===== */
/* 「已编辑」标记(糖哥 2026-08-30:1H 内可编辑,改了要留痕、能翻) */
.sq-edited {
  border: 0; background: none; padding: 0; cursor: pointer;
  font-size: var(--sq-fs-meta); color: var(--text-muted, #6b7080);
}
.sq-edited:hover { color: var(--sq-link, #1d9bf0); text-decoration: underline; }
/* 编辑记录:由旧到新一版一版列出来 */
.sq-edits { display: flex; flex-direction: column; gap: 10px; max-height: 46vh; overflow-y: auto; }
.sq-edit-ver { padding: 9px 11px; border-radius: 10px; border: 1px solid var(--line-soft, rgba(255,255,255,0.08)); }
.sq-edit-ver.now { border-color: var(--sq-link, #1d9bf0); }
.sq-edit-meta { font-size: calc(12px * var(--sv-font-scale, 1)); color: var(--text-muted, #6b7080); margin-bottom: 5px; }
.sq-edit-body { font-size: calc(13.5px * var(--sv-font-scale, 1)); line-height: 1.6; color: var(--text-main, #f4f5f7); white-space: pre-wrap; word-break: break-word; }

/* 合并后的通知:头像堆一排(对标 X) */
.sq-notif-avs.many { gap: 0; }
.sq-notif-avs.many .sq-notif-av { margin-right: -8px; border: 2px solid var(--bg-core, #0b0e13); }
.sq-notif-avs.many .sq-notif-av:last-child { margin-right: 0; }

/* 统计数字可点(关注 / 粉丝 → 名单) */
.sq-stat-link { cursor: pointer; }
.sq-stat-link:hover b { text-decoration: underline; }
/* 名单弹层里的人名条:复用右栏推荐位的形态,不另起一套 */
.sq-people-modal { max-height: 46vh; overflow-y: auto; margin: -4px -4px 0; }
.sq-people-modal .sq-person { width: 100%; }
.sq-avatar.sq-person-av { width: 38px; height: 38px; font-size: calc(15px * var(--sv-font-scale, 1)); }

/* 他人主页复用「个人资料」面板后补两处:顶部关注键、返回条与横幅的衔接 */
.sq-profile-follow {
  position: absolute; right: 14px; bottom: -46px; z-index: 2;
  padding: 8px 20px; border-radius: 999px; border: 1px solid var(--line-strong, rgba(255,255,255,0.18));
  background: var(--text-main, #f4f5f7); color: var(--bg-core, #0b0e13);
  font-size: calc(14px * var(--sv-font-scale, 1)); font-weight: 800; cursor: pointer;
}
.sq-profile-follow.on { background: transparent; color: var(--text-main, #f4f5f7); }
.sq-profile-follow.on:hover { border-color: var(--down, #f6465d); color: var(--down, #f6465d); }
.sq-profile-banner { position: relative; }
#sqProfileBack { margin-bottom: 0; }
[data-prof-tab][hidden] { display: none; }

/* ⚠️他人主页的浮层样式(.sq-user-mask / .sq-user-card ...)已于 2026-08-30 整套撤除 ——
   糖哥定调「点开你可能喜欢这一块时,也不要弹窗,而是要做成和点开推文时一样的格式」,
   现在他人主页复用「个人资料」面板(.sq-profile-*),别再往回加浮层。 */
.sq-img-zoom{cursor:zoom-in}

/* 长文折叠（对标 X 的「显示更多」）：列表里超长正文收成 10 行，点按钮展开/收起。
   详情页不加 .sq-clamp（postHtml 判定 inFeed），天然全展开。 */
.sq-text.sq-clamp{display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:10;line-clamp:10;overflow:hidden}
.sq-text.sq-clamp.open{display:block!important;-webkit-line-clamp:unset;line-clamp:unset;overflow:visible}
/* 长文的「显示更多」(对标 X:蓝色文字,左对齐,紧跟在正文下面)。
   ⚠️两个坑,都是这条规则原来踩的:
     ①它当时写的是 .sq-more —— 那是信息流底部「加载更多」的整行按钮,
       共用一个类只能盖掉一部分属性,display:block + width:100% 盖不掉,
       结果「显示更多」被撑成孤零零的一整行(糖哥 2026-08-30 报「没跟在文章最后面」);
     ②颜色写的是 var(--sq-accent) —— **这个变量全站根本没定义过**,又没给 fallback,
       整条 color 声明作废、颜色继承父级,于是显示成白字(糖哥报「没做成蓝的」)。
   现在:独立类名 + 站内实际在用的蓝(与 .sq-tag 同色),并且带 fallback。 */
.sq-expand {
  display: inline-block; margin: 3px 0 0; padding: 0;
  background: none; border: 0; cursor: pointer;
  font-family: inherit; font-size: var(--sq-fs-body); font-weight: 400; line-height: var(--sq-lh-body);
  color: var(--sq-link, #1d9bf0);
  text-align: left;
}
.sq-expand:hover { text-decoration: underline; }

/* 评论区附件预览(糖哥 2026-08-30):缩略图与发文区一致。
   ⚠️旧的 .sq-reply-row / .sq-reply-imgbtn 已随 X 式回复框一起撤掉,别再往回加 —— 
   工具按钮现在统一用发文框那套 .sq-tool。 */
.sq-reply-preview { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.sq-reply-thumb { position: relative; width: 64px; height: 64px; border-radius: 10px; overflow: hidden; }
.sq-reply-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sq-reply-box .sq-reply-thumb button {
  position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; padding: 0;
  border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; font-size: calc(12px * var(--sv-font-scale, 1)); line-height: 1;
  display: flex; align-items: center; justify-content: center;
}

/* 表情选择器面板(糖哥 2026-08-30,对标 X) */
.sq-emoji-panel {
  position: fixed; z-index: 9998; width: 300px;
  background: var(--bg-secondary, #16181c); border: 1px solid var(--sv-line, rgba(255,255,255,.12));
  border-radius: 14px; box-shadow: 0 12px 40px rgba(0,0,0,.5); padding: 8px;
}
.sq-emoji-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--sv-line, rgba(255,255,255,.1)); padding-bottom: 6px; margin-bottom: 6px; }
.sq-emoji-tab { flex: 1; background: transparent; border: 0; cursor: pointer; font-size: calc(18px * var(--sv-font-scale, 1)); padding: 5px 0; border-radius: 8px; line-height: 1; opacity: .55; }
.sq-emoji-tab:hover { background: rgba(255,255,255,.06); }
.sq-emoji-tab.on { opacity: 1; background: rgba(29,155,240,.15); }
.sq-emoji-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; max-height: 220px; overflow-y: auto; }
.sq-emoji-item { background: transparent; border: 0; cursor: pointer; font-size: calc(20px * var(--sv-font-scale, 1)); padding: 4px 0; border-radius: 8px; line-height: 1.2; }
.sq-emoji-item:hover { background: rgba(255,255,255,.1); }

/* 贴纸/meme包(糖哥 2026-08-30):4列大格,选中作为图片附件发送 */
.sq-emoji-grid.sq-sticker-grid { grid-template-columns: repeat(4, 1fr); gap: 6px; }
.sq-sticker-item { padding: 2px; background: transparent; border: 0; cursor: pointer; border-radius: 10px; }
.sq-sticker-item img { width: 100%; aspect-ratio: 1; border-radius: 10px; display: block; }
.sq-sticker-item:hover { background: rgba(255,255,255,.08); }

/* 浏览量(糖哥 2026-08-30):非交互统计,和操作按钮同排但鼠标不高亮 */
.sq-act.sq-views { cursor: default; }
.sq-act.sq-views:hover { color: var(--text-2, #8b98a5); background: transparent; }

/* ============================================================
   推文详情页(糖哥 2026-08-30,对标 X 的 /status/:id)
   详情不再是浮层卡片,而是中列里的一整页:sticky 返回顶栏 + 上文对话串 +
   主帖大字 + 时间/浏览量 + 统计行 + 加大的互动条 + 常驻回复框 + 评论列表。
   ⚠️ 追加在文件末尾是有意的:后面紧跟本节自己的媒体查询,顺序对了才不会被主定义盖掉。
   ============================================================ */
.sq-thread-top {
  position: sticky; top: var(--sq-header-h, 64px); z-index: 40;
  display: flex; align-items: center; gap: 20px;
  margin: 0 -16px; padding: 0 16px; min-height: 50px;
  background: color-mix(in srgb, var(--bg-core, #0b0e13) 84%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-soft, rgba(255,255,255,0.06));
}
.sq-thread-top b { font-size: calc(19px * var(--sv-font-scale, 1)); font-weight: 800; color: var(--text-main, #f4f5f7); }
.sq-thread-back {
  display: grid; place-items: center; width: 34px; height: 34px; flex: none;
  border: 0; border-radius: 50%; cursor: pointer;
  background: transparent; color: var(--text-main, #f4f5f7);
}
.sq-thread-back:hover { background: var(--accent-soft, rgba(255,255,255,0.08)); }

/* 上文对话串:被回复的那几条(由远及近),与 X 一样用一条竖线串起来。
   竖线的 left 要对齐头像圆心:卡片 padding-left 4px + 头像半径 21px ≈ 24px;
   top 从头像底部起(14px 内边距 + 42px 头像);bottom 给负值,让线越过卡片间隙接到下一张头像。 */
.sq-thread-anc .sq-post {
  position: relative; border-bottom: 0; padding-bottom: 4px;
}
.sq-thread-anc .sq-post::after {
  content: ''; position: absolute; left: 24px; width: 2px;
  top: 58px; bottom: -10px;
  background: var(--line-soft, rgba(255,255,255,0.14));
}

/* 详情主帖:X 式竖排(头像与名字一行,正文单独成块) */
.sq-post.sq-thread-main {
  display: block; padding: 12px 4px 4px;
  border-bottom: 1px solid var(--line-soft, rgba(255,255,255,0.06));
}
.sq-thread-who { display: flex; align-items: center; gap: 12px; }
.sq-thread-who .sq-avatar { width: 44px; height: 44px; font-size: calc(17px * var(--sv-font-scale, 1)); }
.sq-thread-id { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.sq-thread-nm { display: flex; align-items: center; gap: 6px; min-width: 0; }
.sq-thread-id .sq-name { font-size: calc(16px * var(--sv-font-scale, 1)); font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sq-thread-id .sq-badge { flex: none; }
.sq-handle { font-size: var(--sq-fs-meta); color: var(--text-muted, #6b7080); cursor: pointer; }
.sq-handle:hover { text-decoration: underline; }
.sq-thread-who .sq-menu { margin-left: auto; font-size: calc(18px * var(--sv-font-scale, 1)); }
.sq-thread-main .sq-text.sq-thread-text { margin-top: 12px; font-size: var(--sq-fs-body-lg); line-height: 1.5; }
.sq-thread-main .sq-media { margin-top: 12px; }
.sq-thread-main .sq-media[data-n="1"] img { max-height: 620px; }
.sq-thread-when {
  margin-top: 14px; font-size: var(--sq-fs-meta); color: var(--text-muted, #6b7080);
  font-variant-numeric: tabular-nums;
}
.sq-thread-when b { color: var(--text-main, #f4f5f7); font-weight: 700; }
.sq-thread-stats {
  display: flex; flex-wrap: wrap; gap: 18px; margin-top: 12px; padding: 13px 2px;
  border-top: 1px solid var(--line-soft, rgba(255,255,255,0.08));
  font-size: var(--sq-fs-meta); color: var(--text-muted, #6b7080);
}
.sq-thread-stats b { color: var(--text-main, #f4f5f7); font-weight: 800; }
/* 详情页互动条:X 在这里把按钮放大并铺满整行 */
.sq-thread-main .sq-acts {
  justify-content: space-around; gap: 0; margin-top: 2px; padding: 4px 0;
  border-top: 1px solid var(--line-soft, rgba(255,255,255,0.08));
}
.sq-thread-main .sq-act { padding: 9px 12px; font-size: var(--sq-fs-act); }
.sq-thread-main .sq-act svg { width: 21px; height: 21px; }

/* 常驻回复框(X:「发布你的回复」) */
.sq-thread-replybox {
  padding: 12px 4px; border-bottom: 1px solid var(--line-soft, rgba(255,255,255,0.06));
}
.sq-thread-replybox .sq-reply-box { margin-top: 0; }
.sq-thread-replybox .sq-reply-box input { padding: 11px 14px; font-size: calc(15px * var(--sv-font-scale, 1)); }
.sq-thread-replybox .sq-reply-box button[data-reply-send] { padding: 9px 20px; font-size: calc(14px * var(--sv-font-scale, 1)); }
.sq-thread-guest {
  display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
  padding: 18px 12px; font-size: calc(14px * var(--sv-font-scale, 1)); color: var(--text-secondary, #b0b4bd);
  border-bottom: 1px solid var(--line-soft, rgba(255,255,255,0.06));
}
.sq-thread-guest a {
  padding: 7px 16px; border-radius: 999px; text-decoration: none; font-weight: 700;
  background: var(--accent, #1d9bf0); color: var(--accent-contrast, #fff);
}

/* 评论列表:每条就是一张完整推文卡(互动条与主帖同款),点进去还是详情页 */
.sq-thread-replies .sq-post { cursor: pointer; }
.sq-thread-replies .sq-post.sq-reply { padding-left: 4px; }

/* 读取骨架:比一屏"读取中"更接近 X 的观感,也让人看得出正在装什么 */
.sq-thread-skel { display: grid; grid-template-columns: 44px 1fr; gap: 10px 12px; padding: 16px 4px; }
.sq-thread-skel span {
  border-radius: 8px; background: var(--line-soft, rgba(255,255,255,0.07));
  animation: sqSkel 1.2s ease-in-out infinite;
}
.sq-thread-skel .sk-av { width: 44px; height: 44px; border-radius: 50%; grid-row: span 2; }
.sq-thread-skel .sk-l1 { height: 14px; width: 40%; }
.sq-thread-skel .sk-l2 { height: 14px; width: 66%; }
.sq-thread-skel .sk-l3 { height: 14px; width: 88%; grid-column: 2; }
/* 列表骨架:与详情页骨架同一套呼吸动画 */
.sq-feed-skel { display: flex; flex-direction: column; }
.sq-skel-card {
  display: grid; grid-template-columns: var(--sq-avatar) 1fr; gap: 8px 12px; padding: 14px 4px;
  border-bottom: 1px solid var(--line-soft, rgba(255,255,255,0.06));
}
.sq-skel-card span {
  border-radius: 8px; background: var(--line-soft, rgba(255,255,255,0.07));
  animation: sqSkel 1.2s ease-in-out infinite;
}
.sq-skel-card .sk-av { width: var(--sq-avatar); height: var(--sq-avatar); border-radius: 50%; grid-row: span 2; }
.sq-skel-card .sk-l1 { height: 13px; width: 32%; }
.sq-skel-card .sk-l2 { height: 13px; width: 88%; }
.sq-skel-card .sk-l3 { height: 13px; width: 64%; grid-column: 2; }
@media (prefers-reduced-motion: reduce) { .sq-skel-card span { animation: none; } }

@keyframes sqSkel { 0%, 100% { opacity: .45; } 50% { opacity: .9; } }
@media (prefers-reduced-motion: reduce) { .sq-thread-skel span { animation: none; } }

@media (max-width: 720px) {
  .sq-thread-top { top: var(--sq-header-h, 56px); margin: 0 -10px; padding: 0 10px; min-height: 46px; }
  .sq-thread-top b { font-size: calc(17px * var(--sv-font-scale, 1)); }
  .sq-thread-who .sq-avatar { width: 40px; height: 40px; }
  .sq-thread-main .sq-text.sq-thread-text { font-size: calc(16px * var(--sv-font-scale, 1)); }
  .sq-thread-main .sq-act { padding: 8px 6px; }
  .sq-thread-replybox .sq-reply-box input { font-size: calc(16px * var(--sv-font-scale, 1)); } /* iOS 低于 16px 会自动放大页面 */
}