/* ============================================================ *
 *  twitter.css — 推特 / X 板块独立样式（自 style.css 拆出）
 *
 *  覆盖范围：
 *    · 推特主页（关注 / 推荐 / 娱乐 / 我的）顶栏、底栏、Feed Tab、个人页
 *    · 时间轴 .tweet / .tweet-* 卡片 + 头像 / 评论 / 互动条
 *    · 推文详情页：返回 / 标题 / 转发按钮 / 转发去向菜单 / 微信好友选择层 / 评论 bar
 *    · 推特发推 modal / 编辑资料 modal / 关注挑选 / 粉丝挑选 / 好友联动设置
 *    · 推特 DM 私信：列表 / 聊天 / 气泡 / 引用 / 多选 / 表情面板 / 设置弹窗 / 暗色派生
 *    · 推特转发推文到私信时的"折叠富卡"气泡内嵌样式
 *
 *  暗色规则使用与原 style.css 完全相同的 html[data-appearance="dark"] 选择器；
 *  本文件必须在 index.html 中跟在 style.css 之后引入（确保级联覆盖关系不变）。
 *
 *  不属于推特独占的样式仍保留在 style.css，例如：
 *    · 多模块共用变量段（#twitter-page, #wechat-page, .couple-space-overlay/.shell ...）
 *    · "推特 / 微信统一冷淡玻璃风覆盖层"整段（含输入框 / 按钮 / 滚动条等共享规则）
 * ============================================================ */

/* ====== ① 推特核心：首页 / 详情 / 评论 / composer / 弹窗 / 转发去向 / DM 转发富卡 + keyframes(twitter-spin, twitterDetailForwardMenuIn)（来自 style.css L5681-L7510 · 原样迁移） ====== */

#twitter-page {
    position: relative;
    --twitter-app-header-h: 56px;
}

/* 非主页 Tab：刷新钮视觉上隐藏，但仍占位（与左侧返回键列对称），避免标题「推特/X」「消息」偏离几何中心 */
#twitter-page.twitter-page--refresh-home-only .twitter-refresh-btn {
    visibility: hidden !important;
    pointer-events: none !important;
    opacity: 0 !important;
}

/* 「我」个人页：名片背景延伸到顶栏下方；底栏以上用实色底，避免透出主题「全局背景」 */
#twitter-page.active.twitter-page--profile-bleed {
    background: #fff !important;
    background-image: none !important;
}

#twitter-page.twitter-page--profile-bleed .twitter-app-main {
    background: #fff;
    overflow: visible;
}

#twitter-page.twitter-page--profile-bleed .twitter-view-profile {
    background: #fff;
    overflow: visible;
}

#twitter-page.twitter-page--profile-bleed .twitter-profile-scroll {
    margin-top: calc(-1 * var(--twitter-app-header-h));
    background: #fff;
}

#twitter-page.twitter-page--profile-bleed .twitter-profile-sheet {
    background: #fff;
}

/* height与 padding-top 同时存在时会把背景可视高度压扁，须放开高度；略增高以盖住头像约一半（接近 X） */
#twitter-page.twitter-page--profile-bleed .twitter-profile-banner {
    height: auto;
    padding-top: var(--twitter-app-header-h);
    min-height: calc(128px + var(--twitter-app-header-h));
    box-sizing: border-box;
}

#twitter-page.twitter-page--profile-bleed .twitter-app-header,
#twitter-page.active.twitter-page--profile-bleed .twitter-app-header {
    background: transparent !important;
    border-bottom: none !important;
    position: relative;
    z-index: 4;
}

#twitter-page.twitter-page--profile-bleed .twitter-app-title,
#twitter-page.twitter-page--profile-bleed .twitter-app-title-slash {
    color: #0f1419;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.65), 0 0 12px rgba(255, 255, 255, 0.45);
}

#twitter-page.twitter-page--profile-bleed .twitter-app-back.back-btn {
    color: #0f1419;
    fill: #0f1419;
    background: rgba(255, 255, 255, 0.42);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

#phone-page.active,
#twitter-page.active {
    display: flex;
}

#twitter-page.active .books-header,
#twitter-page.active .twitter-app-header {
    background: #fff;
    border-bottom: 1px solid #eff3f4;
}

#twitter-page.active .books-header h1,
#twitter-page.active .twitter-app-title {
    color: #0f1419;
}

#twitter-page.active .back-btn,
#twitter-page.active .books-header-btn {
    transition: transform 0.3s ease, background 0.2s;
    color: #0f1419;
    fill: #0f1419;
}

/* 强制 grid：覆盖 .books-header 的 flex（style.css），否则标题会与返回键挤在同一 flow */
#twitter-page .twitter-app-header.books-header {
    display: grid !important;
    grid-template-columns: minmax(44px, auto) minmax(0, 1fr) minmax(44px, auto);
    align-items: center;
    column-gap: 6px;
    padding: 8px 12px;
    flex-shrink: 0;
}

.twitter-app-back.back-btn {
    grid-column: 1;
    grid-row: 1;
    width: 36px;
    height: 36px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0;
    justify-self: start;
}

/* 避免世界书页迁移来的 .books-header h1 { flex:1 } 在少数浏览器里干扰网格子项 */
#twitter-page .twitter-app-header.books-header .twitter-app-title {
    flex: none !important;
}

.twitter-app-title {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    text-align: center;
    justify-self: center;
    width: 100%;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.02em;
}

.twitter-app-title-slash {
    color: #536471;
    font-weight: 600;
    margin: 0 2px;
}

/* 刷新 +（可选）私信设置齿轮：只占网格第 3 列一格，避免第四个兄弟节点折行叠住标题 */
.twitter-app-header-right {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    min-width: 44px;
}

.twitter-app-header-right .twitter-refresh-btn,
.twitter-app-header-right .twitter-dm-page-settings-btn {
    flex-shrink: 0;
}

.twitter-app-main {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    position: relative;
    background: #fff;
}

.twitter-view {
    display: none;
    flex: 1;
    min-height: 0;
    flex-direction: column;
}

.twitter-view.twitter-view-active {
    display: flex;
}

.twitter-feed-tabs {
    display: flex;
    flex-shrink: 0;
    border-bottom: 1px solid #eff3f4;
    background: #fff;
}

.twitter-feed-tab {
    flex: 1;
    padding: 14px 8px;
    border: none;
    background: none;
    font-size: 15px;
    font-weight: 500;
    color: #536471;
    cursor: pointer;
    position: relative;
}

.twitter-feed-tab:hover {
    background: rgba(15, 20, 25, 0.04);
}

.twitter-feed-tab.active {
    color: #0f1419;
    font-weight: 700;
}

.twitter-feed-tab.active::after {
    content: "";
    position: absolute;
    left: 25%;
    right: 25%;
    bottom: 0;
    height: 4px;
    border-radius: 2px 2px 0 0;
    background: #1d9bf0;
}

.twitter-feed-panels {
    flex: 1;
    min-height: 0;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #E7E8EA;
}

.twitter-feed-panel {
    display: none;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(15, 20, 25, 0.14) transparent;
}

.twitter-feed-panel:hover {
    scrollbar-color: rgba(15, 20, 25, 0.28) transparent;
}

.twitter-feed-panel::-webkit-scrollbar {
    width: 5px;
}

.twitter-feed-panel::-webkit-scrollbar-track {
    background: transparent;
}

.twitter-feed-panel::-webkit-scrollbar-thumb {
    background: rgba(15, 20, 25, 0.12);
    border-radius: 100px;
}

.twitter-feed-panel:hover::-webkit-scrollbar-thumb {
    background: rgba(15, 20, 25, 0.24);
}

.twitter-feed-panel.active {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

/* 时间轴面板在 flex 子项内须 min-height:0，否则会被 .twitter-body 的 min-height:100% 撑满视口、无法出现内部滚动 */
.twitter-feed-panels > .twitter-feed-panel {
    min-height: 0;
}

.twitter-messages-inner {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 24px;
    color: #536471;
    background: #fff;
}

.twitter-messages-title {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 700;
    color: #0f1419;
}

.twitter-messages-hint {
    margin: 0;
    font-size: 15px;
}

/* —— 个人主页（参考 X 布局） —— */
.twitter-view-profile {
    overflow: hidden;
    background: #fff;
    --twitter-profile-avatar: 72px;
}

.twitter-profile-scroll {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: #fff;
    padding: 0;
}

.twitter-profile-banner {
    flex-shrink: 0;
    position: relative;
    z-index: 0;
    height: 112px;
    background: #1d9bf0;
    width: 100%;
    max-width: none;
    margin: 0;
    box-sizing: border-box;
    background-size: cover;
    background-position: center;
    transition: filter 0.2s;
}

.twitter-profile-banner:hover {
    filter: brightness(0.85);
}

.twitter-profile-banner-overlay {
    display: none;
    position: absolute;
    inset: 0;
    height: 96px;
    background: rgba(0, 0, 0, 0.35);
    align-items: center;
    justify-content: center;
    border-radius: 0;
}

.twitter-profile-banner:hover .twitter-profile-banner-overlay {
    display: flex;
}

.twitter-profile-sheet {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 0 22px 28px;
    position: relative;
    z-index: 1;
    max-width: 100%;
    box-sizing: border-box;
}

.twitter-profile-avatar-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    /* 头像约一半压在名片背景上（与 X 一致）；尺寸见 --twitter-profile-avatar */
    margin-top: calc(var(--twitter-profile-avatar) / -2);
    margin-bottom: 12px;
    gap: 12px;
    padding-right: 2px;
}

.twitter-profile-avatar-wrap {
    width: var(--twitter-profile-avatar);
    height: var(--twitter-profile-avatar);
    z-index: 2;
    border-radius: 50%;
    background: #1d9bf0;
    border: 3px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 28px;
    font-weight: 700;
    flex-shrink: 0;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    transition: opacity 0.2s;
}

.twitter-profile-avatar-wrap:hover {
    opacity: 0.85;
}

.twitter-profile-avatar-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    z-index: 1;
}

.twitter-profile-avatar-letter {
    position: relative;
    z-index: 2;
}

.twitter-profile-edit-btn {
    margin-bottom: 4px;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid #cfd9de;
    background: #fff;
    color: #0f1419;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.twitter-profile-edit-btn:hover {
    background: rgba(15, 20, 25, 0.04);
}

.twitter-profile-name {
    font-size: 20px;
    font-weight: 800;
    color: #0f1419;
    line-height: 1.25;
    padding-right: 4px;
    word-break: break-word;
}

.twitter-profile-handle {
    font-size: 15px;
    color: #536471;
    margin-top: 6px;
    padding-right: 4px;
    word-break: break-all;
}

.twitter-profile-bio {
    margin: 12px 0 0;
    font-size: 15px;
    line-height: 1.45;
    color: #0f1419;
    white-space: pre-wrap;
}

.twitter-profile-joined {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 12px;
    font-size: 14px;
    color: #536471;
}

.twitter-profile-joined-icon {
    display: flex;
    opacity: 0.85;
}

.twitter-profile-stats {
    display: flex;
    gap: 20px;
    margin-top: 14px;
    font-size: 14px;
    color: #0f1419;
}

.twitter-profile-stats strong {
    font-weight: 800;
}

.twitter-profile-tabs {
    display: flex;
    margin-top: 16px;
    border-bottom: 1px solid #eff3f4;
}

.twitter-profile-tab {
    flex: 1;
    padding: 16px 4px;
    border: none;
    background: none;
    font-size: 15px;
    font-weight: 500;
    color: #536471;
    cursor: pointer;
    position: relative;
}

.twitter-profile-tab.active {
    color: #0f1419;
    font-weight: 700;
}

.twitter-profile-tab.active::after {
    content: "";
    position: absolute;
    left: 15%;
    right: 15%;
    bottom: 0;
    height: 4px;
    border-radius: 2px 2px 0 0;
    background: #1d9bf0;
}

.twitter-profile-tab-panels {
    flex: 1;
    min-height: 180px;
    display: flex;
    flex-direction: column;
}

.twitter-profile-tab-panel {
    flex: 1;
    min-height: 0;
    padding: 20px 0 24px;
    background: #fff;
}

.twitter-profile-empty {
    text-align: center;
    color: #536471;
    font-size: 15px;
    margin: 40px 8px;
    padding: 0 8px;
    line-height: 1.5;
}

.twitter-bottom-nav {
    display: flex;
    flex-shrink: 0;
    border-top: 1px solid #eff3f4;
    background: #fff;
    padding: 6px 0 10px;
    justify-content: space-around;
    align-items: center;
}

.twitter-bottom-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 4px;
    border: none;
    background: none;
    color: #536471;
    cursor: pointer;
    font-size: 11px;
}

.twitter-bottom-btn .twitter-bottom-icon {
    width: 26px;
    height: 26px;
}

.twitter-bottom-btn.active {
    color: #0f1419;
    font-weight: 700;
}

.twitter-bottom-label {
    line-height: 1.2;
}

/* ── 推特/X：悬浮发帖 + 按钮 ─────────────────────────────── */
.twitter-fab-compose {
    position: fixed;
    right: 18px;
    bottom: 92px; /* 避开底部导航 */
    width: 58px;
    height: 58px;
    border-radius: 50%;
    border: none;
    background: #1d9bf0;
    color: #fff;
    box-shadow: 0 14px 28px rgba(29, 155, 240, 0.32);
    cursor: pointer;
    z-index: 90;
    touch-action: none; /* 允许拖拽 */
    user-select: none;
}
.twitter-fab-compose:active {
    opacity: 0.92;
    transform: translateY(1px);
}
.twitter-fab-plus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 34px;
    line-height: 1;
    font-weight: 700;
    transform: translateY(-1px);
}
.twitter-fab-compose.twitter-fab-dragging {
    opacity: 0.9;
    box-shadow: 0 18px 36px rgba(29, 155, 240, 0.38);
}

/* ── 推特/X：发推弹窗 ───────────────────────────────────── */
.twitter-compose-modal-content {
    width: min(520px, calc(100vw - 28px));
    border-radius: 16px;
    padding: 0;
    overflow: hidden;
}
.twitter-compose-modal-body {
    padding: 14px 16px 8px;
}
.twitter-compose-text {
    width: 100%;
    resize: none;
    border: 1px solid rgba(0,0,0,0.12);
    border-radius: 12px;
    padding: 12px 12px;
    outline: none;
    font-size: 15px;
    line-height: 1.5;
    background: #fff;
    color: #0f1419;
}
.twitter-compose-text:focus {
    border-color: rgba(29,155,240,0.65);
    box-shadow: 0 0 0 4px rgba(29,155,240,0.12);
}
.twitter-compose-media-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}
.twitter-compose-media-input {
    display: none;
}
.twitter-compose-media-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 34px;
    padding: 0 12px;
    border: 1px solid rgba(29,155,240,0.35);
    border-radius: 999px;
    background: #fff;
    color: #1d9bf0;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}
.twitter-compose-media-btn:hover {
    background: rgba(29,155,240,0.08);
}
.twitter-compose-media-btn:active {
    transform: translateY(1px);
}
.twitter-compose-media-preview {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 10px;
}
.twitter-compose-media-preview:empty {
    display: none;
}
.twitter-compose-media-thumb {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border: 1px solid rgba(15,20,25,0.10);
    border-radius: 8px;
    background: #f7f9f9;
}
.twitter-compose-media-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.twitter-compose-media-thumb-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    color: #536471;
    font-size: 13px;
    line-height: 1.35;
    text-align: center;
}
.twitter-compose-media-remove {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 50%;
    background: rgba(15,20,25,0.72);
    color: #fff;
    font-size: 18px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.twitter-compose-media-badge,
.twitter-userpost-media-badge {
    position: absolute;
    left: 6px;
    bottom: 6px;
    padding: 2px 6px;
    border-radius: 6px;
    background: rgba(15,20,25,0.72);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
}
.twitter-compose-counter-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 6px;
}
.twitter-compose-counter {
    font-size: 12px;
    color: #536471;
}
.twitter-compose-counter.is-warn {
    color: #e0245e;
    font-weight: 600;
}
.twitter-compose-hint {
    margin-top: 8px;
    font-size: 12px;
    color: #536471;
}
.twitter-compose-modal-footer {
    display: flex;
    gap: 10px;
    justify-content: center;
    padding: 12px 16px 14px;
    border-top: 1px solid rgba(0,0,0,0.06);
    background: rgba(255,255,255,0.9);
}

.twitter-compose-modal-footer > button {
    min-width: 160px;
}

.twitter-userpost-media-grid {
    display: grid;
    gap: 4px;
    margin-top: 10px;
    max-width: 440px;
    overflow: hidden;
    border: 1px solid rgba(15,20,25,0.10);
    border-radius: 8px;
    background: #eff3f4;
}
.twitter-userpost-media-grid--n1 {
    display: block;
    max-width: 380px;
}
.twitter-userpost-media-grid--n2,
.twitter-userpost-media-grid--n3,
.twitter-userpost-media-grid--n4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.twitter-userpost-media-item {
    position: relative;
    min-height: 0;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #f7f9f9;
}
.twitter-userpost-media-grid--n1 .twitter-userpost-media-item {
    aspect-ratio: 16 / 10;
}
.twitter-userpost-media-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.twitter-userpost-media-fallback {
    width: 100%;
    height: 100%;
    min-height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
    color: #536471;
    font-size: 14px;
    text-align: center;
    background: linear-gradient(135deg, #f7f9f9, #e8f5fe);
}

/* 发推弹窗：全局 .modal-footer { height:50px } 会裁切底部按钮；此处改为自适应高度 + 纵向 flex 分区 */
#twitter-compose-modal .twitter-compose-modal-content.modal-content {
    display: flex;
    flex-direction: column;
    max-height: min(88vh, 620px);
    overflow: hidden;
}

#twitter-compose-modal .twitter-compose-modal-body.modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

#twitter-compose-modal .modal-footer.twitter-compose-modal-footer {
    height: auto !important;
    min-height: 52px;
    flex: 0 0 auto;
    flex-shrink: 0;
    align-items: center;
    box-sizing: border-box;
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
}

.twitter-profile-edit-modal-content {
    max-width: 400px;
}

.twitter-edit-static-hint {
    margin: -4px 0 12px;
    padding: 0 2px;
    font-size: 13px;
    line-height: 1.55;
    color: #536471;
}

.twitter-edit-joined-field-label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #0f1419;
}

.twitter-edit-joined-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.twitter-edit-joined-select {
    flex: 1;
    min-width: 0;
    padding: 8px 10px;
    font-size: 14px;
}

/* 推特正在关注好友选择模态框 */
.twitter-following-picker-modal-content {
    max-width: 380px;
    width: 92%;
}

.twitter-followers-picker-modal-content {
    max-width: 400px;
    width: 92%;
}

.twitter-stat-followers-btn {
    cursor: pointer;
}

.twitter-followers-picker-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.twitter-followers-card {
    border: 1px solid #eff3f4;
    border-radius: 18px;
    padding: 14px;
    background: #fff;
}

.twitter-followers-card-title {
    font-size: 15px;
    font-weight: 700;
    color: #0f1419;
}

.twitter-followers-card-hint {
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 1.55;
    color: #536471;
}

.twitter-followers-count-input {
    margin-top: 12px;
}

.twitter-followers-dropdown {
    width: 100%;
    border: 1px solid #d0d7de;
    border-radius: 14px;
    background: #f7f9f9;
    color: #0f1419;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.twitter-followers-dropdown.is-open {
    background: #e8f5fe;
    border-color: #1d9bf0;
}

.twitter-followers-dropdown-meta {
    font-size: 13px;
    font-weight: 500;
    color: #536471;
}

.twitter-followers-picker-list-wrap {
    margin-top: 12px;
    border-top: 1px solid #eff3f4;
    padding-top: 10px;
    max-height: 280px;
    overflow-y: auto;
}

.twitter-followers-picker-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-top: 1px solid #eff3f4;
}

.twitter-followers-picker-tip {
    font-size: 13px;
    color: #536471;
}

.twitter-followers-picker-footer .btn-save {
    padding: 7px 20px;
    font-size: 14px;
}

.twitter-following-picker-list {
    display: flex;
    flex-direction: column;
}

.twitter-following-picker-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    transition: background 0.15s;
}

.twitter-following-picker-item:hover {
    background: #f7f9f9;
}

.twitter-following-picker-item.selected {
    background: #e8f5fe;
}

.twitter-following-auto-settings-btn {
    width: 30px;
    height: 30px;
    border: 1px solid #d0d7de;
    border-radius: 50%;
    background: #fff;
    color: #536471;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    flex: 0 0 auto;
}

.twitter-following-auto-settings-btn:hover {
    border-color: #1d9bf0;
    color: #1d9bf0;
    background: #f7fbff;
}

.twitter-friend-automation-modal-content {
    width: min(92vw, 390px);
    max-height: min(86vh, 620px);
    display: flex;
    flex-direction: column;
    padding: 0;
    min-height: 0;
    overflow: hidden;
}

.twitter-friend-automation-body {
    flex: 1 1 auto;
    min-height: 0;
    padding: 14px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.twitter-automation-card {
    border: 1px solid #eff3f4;
    border-radius: 14px;
    background: #fff;
    padding: 12px;
}

.twitter-automation-card + .twitter-automation-card {
    margin-top: 12px;
}

.twitter-automation-switch-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.twitter-automation-switch-row strong,
.twitter-automation-switch-row small {
    display: block;
}

.twitter-automation-switch-row strong {
    font-size: 14px;
    color: #0f1419;
}

.twitter-automation-switch-row small {
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.4;
    color: #536471;
}

.twitter-automation-fields {
    margin-top: 12px;
    display: grid;
    gap: 10px;
    font-size: 13px;
    color: #0f1419;
}

.twitter-automation-fields[hidden] {
    display: none;
}

.twitter-automation-time-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.twitter-automation-check {
    display: flex;
    align-items: center;
    gap: 8px;
}

.twitter-friend-automation-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid #eff3f4;
    background: rgba(255, 255, 255, 0.98);
    box-sizing: border-box;
}

/* 与发推弹窗相同：全局 .modal-footer { height:50px } 会裁切底部按钮 */
#twitter-friend-automation-modal .twitter-friend-automation-modal-content.modal-content {
    display: flex;
    flex-direction: column;
    max-height: min(86vh, 620px);
    min-height: 0;
    overflow: hidden;
}

#twitter-friend-automation-modal .modal-header {
    flex: 0 0 auto;
}

#twitter-friend-automation-modal .twitter-friend-automation-body.modal-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

#twitter-friend-automation-modal .modal-footer.twitter-friend-automation-footer {
    height: auto !important;
    min-height: 52px;
    flex: 0 0 auto;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.twitter-following-picker-avatar {
    position: relative;
    flex-shrink: 0;
}

.twitter-following-picker-avatar img,
.twitter-following-picker-avatar .avatar-letter {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 18px;
    color: #fff;
}

.twitter-following-picker-check {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #1d9bf0;
    border: 2px solid #fff;
    display: none;
    align-items: center;
    justify-content: center;
}

.twitter-following-picker-item.selected .twitter-following-picker-check {
    display: flex;
}

.twitter-following-picker-check svg {
    width: 10px;
    height: 10px;
    fill: #fff;
}

.twitter-following-picker-info {
    flex: 1;
    min-width: 0;
    text-align: left;
}

.twitter-following-picker-name {
    font-size: 15px;
    font-weight: 700;
    color: #0f1419;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.twitter-following-picker-handle {
    font-size: 14px;
    color: #536471;
    margin-top: 1px;
}

.twitter-following-picker-empty {
    color: #536471;
    font-size: 15px;
    text-align: center;
    padding: 32px 16px;
}

.twitter-following-picker-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-top: 1px solid #eff3f4;
}

.twitter-following-picker-tip {
    font-size: 13px;
    color: #536471;
}

.twitter-following-picker-footer .btn-save {
    padding: 7px 20px;
    font-size: 14px;
}

#twitter-profile-edit-modal .modal-footer.twitter-profile-edit-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    padding: 16px 12px 20px;
    height: auto;
    flex-wrap: wrap;
    border-top: 1px solid #eff3f4;
}

#twitter-profile-edit-modal .twitter-profile-edit-footer .btn-cancel,
#twitter-profile-edit-modal .twitter-profile-edit-footer .btn-save {
    width: auto;
    min-width: 112px;
    height: 44px;
    padding: 0 28px;
    border-radius: 999px;
    flex: 0 0 auto;
}

#twitter-profile-edit-modal .twitter-profile-edit-footer .btn-cancel {
    border: 1px solid #cfd9de;
    border-right: 1px solid #cfd9de;
}

#twitter-profile-edit-modal .twitter-profile-edit-footer .btn-save {
    border: none;
}

.twitter-refresh-btn.refreshing {
    animation: twitter-spin 0.8s linear infinite;
}

@keyframes twitter-spin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

#twitter-page.active .back-btn:hover,
#twitter-page.active .books-header-btn:hover {
    background: rgba(15, 20, 25, 0.08);
}

.twitter-body {
    flex: 1;
    overflow-y: auto;
    background: #E7E8EA;
    min-height: 100%;
    scrollbar-width: thin;
    scrollbar-color: rgba(15, 20, 25, 0.14) transparent;
}

/* 嵌在 .twitter-feed-panels 内的时间轴由父级 flex 分配高度，禁止 min-height:100% 撑破滚动链 */
.twitter-feed-panels > .twitter-body {
    min-height: 0;
}

.twitter-body:hover {
    scrollbar-color: rgba(15, 20, 25, 0.28) transparent;
}

.twitter-body::-webkit-scrollbar {
    width: 5px;
}

.twitter-body::-webkit-scrollbar-track {
    background: transparent;
}

.twitter-body::-webkit-scrollbar-thumb {
    background: rgba(15, 20, 25, 0.12);
    border-radius: 100px;
}

.twitter-body:hover::-webkit-scrollbar-thumb {
    background: rgba(15, 20, 25, 0.24);
}

.twitter-body .tweet-container {
    max-width: 520px;
    margin: 0 auto;
}

/* 推文列表整体（与 !important 规则配合，压过 API 内联暗色） */
.twitter-body {
    background: #E7E8EA;
    color: #0f1419;
}

#twitter-body-following,
#twitter-body-foryou,
#twitter-body-entertainment,
.twitter-feed-panel {
    background-color: #E7E8EA;
}

#twitter-body-following .tweet-container,
#twitter-body-foryou .tweet-container,
#twitter-body-entertainment .tweet-container {
    background-color: #E7E8EA !important;
    color: #0f1419 !important;
}

#twitter-body-following .tweet,
#twitter-body-foryou .tweet,
#twitter-body-entertainment .tweet {
    background-color: #E7E8EA !important;
}

#twitter-body-following .tweet-header,
#twitter-body-following .tweet-text,
#twitter-body-following .tweet-content-col,
#twitter-body-following .tweet-content,
#twitter-body-following p,
#twitter-body-following .tweet-name,
#twitter-body-foryou .tweet-header,
#twitter-body-foryou .tweet-text,
#twitter-body-foryou .tweet-content-col,
#twitter-body-foryou .tweet-content,
#twitter-body-foryou p,
#twitter-body-foryou .tweet-name,
#twitter-body-entertainment .tweet-header,
#twitter-body-entertainment .tweet-text,
#twitter-body-entertainment .tweet-content-col,
#twitter-body-entertainment .tweet-content,
#twitter-body-entertainment p,
#twitter-body-entertainment .tweet-name {
    color: #0f1419 !important;
}

#twitter-body-following .tweet-handle,
#twitter-body-following .tweet-time,
#twitter-body-following .tweet-interactions,
#twitter-body-following .tweet-interactions span,
#twitter-body-following .tweet-interactions svg,
#twitter-body-foryou .tweet-handle,
#twitter-body-foryou .tweet-time,
#twitter-body-foryou .tweet-interactions,
#twitter-body-foryou .tweet-interactions span,
#twitter-body-foryou .tweet-interactions svg,
#twitter-body-entertainment .tweet-handle,
#twitter-body-entertainment .tweet-time,
#twitter-body-entertainment .tweet-interactions,
#twitter-body-entertainment .tweet-interactions span,
#twitter-body-entertainment .tweet-interactions svg {
    color: #536471 !important;
    fill: #536471 !important;
}

#twitter-body-following .tweet-avatar-wrap,
#twitter-body-following .tweet-avatar-wrap span,
#twitter-body-foryou .tweet-avatar-wrap,
#twitter-body-foryou .tweet-avatar-wrap span,
#twitter-body-entertainment .tweet-avatar-wrap,
#twitter-body-entertainment .tweet-avatar-wrap span {
    color: #fff !important;
}

#twitter-body-following a,
#twitter-body-foryou a,
#twitter-body-entertainment a {
    color: #1d9bf0 !important;
}

/* 推荐流/详情：正文内 <orange> 延伸模块（模型输出内联样式可叠加） */
#twitter-body-foryou orange,
#twitter-detail-content orange,
.twitter-feed-panel orange {
    display: block;
    max-width: 310px;
    margin: 8px auto;
    box-sizing: border-box;
}

#twitter-body-following .tweet-replies,
#twitter-body-foryou .tweet-replies,
#twitter-body-entertainment .tweet-replies {
    border-top: 1px solid #cdd0d4;
    margin-top: 8px;
    padding-top: 8px;
}
#twitter-body-following .tweet-reply,
#twitter-body-foryou .tweet-reply,
#twitter-body-entertainment .tweet-reply {
    border-top: 1px solid #eff3f4;
    padding: 10px 0;
}
#twitter-body-following .tweet-reply:first-child,
#twitter-body-foryou .tweet-reply:first-child,
#twitter-body-entertainment .tweet-reply:first-child {
    border-top: none;
}
#twitter-body-following .tweet-reply .tweet-text,
#twitter-body-foryou .tweet-reply .tweet-text,
#twitter-body-entertainment .tweet-reply .tweet-text {
    color: #0f1419 !important;
}

#twitter-body-following .tweet,
#twitter-body-foryou .tweet,
#twitter-body-entertainment .tweet {
    cursor: pointer;
}
#twitter-body-following .tweet-main:hover .tweet-text,
#twitter-body-following .tweet:hover .tweet-text,
#twitter-body-foryou .tweet-main:hover .tweet-text,
#twitter-body-foryou .tweet:hover .tweet-text,
#twitter-body-entertainment .tweet-main:hover .tweet-text,
#twitter-body-entertainment .tweet:hover .tweet-text {
    text-decoration: underline;
}

/* 推文详情页 */
.twitter-detail-page {
    display: none;
    position: absolute;
    inset: 0;
    background: #E7E8EA;
    z-index: 50;
    flex-direction: column;
}
.twitter-detail-page.show {
    display: flex;
}
.twitter-detail-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    background: #E7E8EA;
    border-bottom: 1px solid #cdd0d4;
    flex-shrink: 0;
}
.twitter-detail-back {
    background: none;
    border: none;
    color: #000;
    cursor: pointer;
    padding: 4px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    transition: background 0.2s;
}
.twitter-detail-back:hover {
    background: rgba(0, 0, 0, 0.08);
}
.twitter-detail-title {
    font-size: 17px;
    font-weight: 700;
    color: #000;
}
/* 详情页右上角线性「转发」按钮：与返回键同一行，靠右贴边 */
.twitter-detail-forward {
    margin-left: auto;
    background: none;
    border: none;
    color: #000;
    cursor: pointer;
    padding: 4px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    transition: background 0.2s, color 0.2s;
}
.twitter-detail-forward:hover {
    background: rgba(0, 0, 0, 0.08);
    color: #1d9bf0;
}
.twitter-detail-forward:active {
    transform: scale(0.96);
}

/* —— 详情页·刷新评论：与转发按钮风格统一的线性 UI，紧贴转发按钮右侧 —— */
.twitter-detail-refresh-comments {
    margin-left: 4px;
    background: none;
    border: none;
    color: #000;
    cursor: pointer;
    padding: 4px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    transition: background 0.2s, color 0.2s, transform 0.2s;
}
.twitter-detail-refresh-comments:hover {
    background: rgba(0, 0, 0, 0.08);
    color: #1d9bf0;
}
.twitter-detail-refresh-comments:active {
    transform: scale(0.96);
}
.twitter-detail-refresh-comments[disabled],
.twitter-detail-refresh-comments.is-loading {
    opacity: 0.55;
    cursor: progress;
}
.twitter-detail-refresh-comments.is-loading svg {
    animation: twitter-detail-refresh-spin 0.9s linear infinite;
}
@keyframes twitter-detail-refresh-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* 转发去向选择浮层（顶层小卡片，覆盖在详情页中央） */
.twitter-detail-forward-menu {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.32);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9000;
    padding: 16px;
}
.twitter-detail-forward-menu.show {
    display: flex;
}
.twitter-detail-forward-menu-card {
    background: #fff;
    width: min(320px, 100%);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.18);
    animation: twitterDetailForwardMenuIn 0.18s ease-out;
}
@keyframes twitterDetailForwardMenuIn {
    from { transform: translateY(8px); opacity: 0; }
    to   { transform: translateY(0);   opacity: 1; }
}
.twitter-detail-forward-menu-title {
    padding: 14px 16px 8px;
    font-size: 14px;
    color: #536471;
    text-align: center;
    border-bottom: 1px solid #eef0f2;
}
.twitter-detail-forward-menu-option {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 18px;
    background: #fff;
    border: none;
    border-bottom: 1px solid #f1f3f4;
    font-size: 15px;
    color: #0f1419;
    cursor: pointer;
    text-align: left;
}
.twitter-detail-forward-menu-option:last-child {
    border-bottom: none;
}
.twitter-detail-forward-menu-option:hover {
    background: #f7f9fa;
}
.twitter-detail-forward-menu-option-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #1d9bf0;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
}
.twitter-detail-forward-menu-option-icon.is-wechat { background: #07c160; }
.twitter-detail-forward-menu-option-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}
.twitter-detail-forward-menu-option-name {
    font-weight: 600;
    font-size: 14px;
    color: #0f1419;
}
.twitter-detail-forward-menu-option-desc {
    font-size: 12px;
    color: #536471;
}
.twitter-detail-forward-menu-cancel {
    background: #f7f9fa;
    color: #536471;
    padding: 12px;
    text-align: center;
    font-size: 14px;
    cursor: pointer;
}
.twitter-detail-forward-menu-cancel:hover {
    background: #eef0f2;
    color: #0f1419;
}

/* 微信好友选择浮层（转发到微信目标列表） */
.twitter-detail-wechat-picker {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.32);
    display: none;
    align-items: flex-end;
    justify-content: center;
    z-index: 9100;
}
.twitter-detail-wechat-picker.show { display: flex; }
.twitter-detail-wechat-picker-card {
    background: #fff;
    width: 100%;
    max-width: 480px;
    max-height: 72vh;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: twitterDetailForwardMenuIn 0.2s ease-out;
}
.twitter-detail-wechat-picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid #eef0f2;
}
.twitter-detail-wechat-picker-title {
    font-size: 15px;
    font-weight: 700;
    color: #0f1419;
}
.twitter-detail-wechat-picker-close {
    background: none;
    border: none;
    font-size: 22px;
    color: #536471;
    cursor: pointer;
    line-height: 1;
}
.twitter-detail-wechat-picker-list {
    flex: 1;
    overflow-y: auto;
    padding: 4px 0 12px;
}
.twitter-detail-wechat-picker-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    cursor: pointer;
    border-bottom: 1px solid #f4f6f8;
}
.twitter-detail-wechat-picker-item:hover { background: #f7f9fa; }
.twitter-detail-wechat-picker-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    flex-shrink: 0;
    background: #1d9bf0;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    background-size: cover;
    background-position: center;
}
.twitter-detail-wechat-picker-name {
    font-weight: 600;
    color: #0f1419;
    font-size: 14px;
}

/* 私信气泡中的「推特转发卡」（折叠卡） */
.twitter-dm-msg-twitter-card {
    margin-top: 8px;
    border: 1px solid rgba(29, 155, 240, 0.22);
    background: linear-gradient(180deg, #ffffff 0%, #f4f7fb 100%);
    border-radius: 14px;
    padding: 10px 12px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(29, 155, 240, 0.08);
    user-select: none;
    color: #0f1419;
    min-width: 200px;
}
.twitter-dm-msg-twitter-card:active { transform: translateY(1px); }
.twitter-dm-msg-twitter-card-tag-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}
.twitter-dm-msg-twitter-card-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    background: #1d9bf0;
    letter-spacing: 0.5px;
}
.twitter-dm-msg-twitter-card-time {
    font-size: 11px;
    color: #536471;
}
.twitter-dm-msg-twitter-card-author-row {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.twitter-dm-msg-twitter-card-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: #1d9bf0;
    background-size: cover;
    background-position: center;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}
.twitter-dm-msg-twitter-card-author {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}
.twitter-dm-msg-twitter-card-name {
    font-size: 13px;
    font-weight: 700;
    color: #0f1419;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.twitter-dm-msg-twitter-card-handle {
    font-size: 11px;
    color: #536471;
}
.twitter-dm-msg-twitter-card-text {
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.5;
    color: #0f1419;
    white-space: pre-wrap;
    word-break: break-word;
}
.twitter-dm-msg-twitter-card-cta {
    margin-top: 8px;
    text-align: right;
    font-size: 12px;
    color: #1d9bf0;
    font-weight: 600;
}
.is-dark-mode .twitter-dm-msg-twitter-card {
    background: linear-gradient(180deg, #14171a 0%, #1d2127 100%);
    border-color: rgba(29, 155, 240, 0.32);
    color: #e7e9ea;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}
.is-dark-mode .twitter-dm-msg-twitter-card-name { color: #e7e9ea; }
.is-dark-mode .twitter-dm-msg-twitter-card-text { color: #d6d8da; }
.is-dark-mode .twitter-dm-msg-twitter-card-handle,
.is-dark-mode .twitter-dm-msg-twitter-card-time { color: #8b98a5; }
.twitter-detail-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    padding: 32px 16px;
    color: #536471;
    gap: 16px;
}
.twitter-detail-loading-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid #cdd0d4;
    border-top-color: #1d9bf0;
    border-radius: 50%;
    animation: twitter-spin 0.85s linear infinite;
}
.twitter-detail-loading-text {
    margin: 0;
    font-size: 14px;
    color: #536471;
}

.twitter-x-detail-root {
    padding-bottom: 24px;
}

.twitter-detail-content {
    flex: 1;
    overflow-y: auto;
    max-width: 520px;
    margin: 0 auto;
    width: 100%;
    padding: 0 16px 24px;
    background-color: #E7E8EA;
    color: #0f1419;
}

/* 用户评论输入栏 */
.twitter-detail-comment-bar {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-top: 1px solid #cdd0d4;
    background: #E7E8EA;
    max-width: 520px;
    margin: 0 auto;
    width: 100%;
}
.twitter-detail-comment-user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #1d9bf0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    flex-shrink: 0;
    overflow: hidden;
}
.twitter-detail-comment-user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.twitter-detail-comment-input-wrap {
    flex: 1;
    display: flex;
    align-items: flex-end;
    gap: 8px;
    border: 1px solid #cdd0d4;
    border-radius: 20px;
    padding: 6px 12px;
    background: #fff;
}
.twitter-comment-input {
    flex: 1;
    border: none;
    outline: none;
    resize: none;
    font-size: 15px;
    line-height: 1.5;
    color: #0f1419;
    background: transparent;
    max-height: 120px;
    overflow-y: auto;
}
.twitter-comment-input::placeholder {
    color: #536471;
}
.twitter-comment-submit-btn {
    background: none;
    border: none;
    color: #1d9bf0;
    cursor: pointer;
    padding: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: opacity 0.2s;
    flex-shrink: 0;
}
.twitter-comment-submit-btn:disabled {
    opacity: 0.4;
    cursor: default;
}
.twitter-comment-submit-btn:hover:not(:disabled) {
    opacity: 0.8;
}

/* 用户新追加的评论样式 */
.twitter-user-new-comment {
    border-top: 1px solid #eff3f4;
    padding-top: 10px;
    margin-top: 10px;
}

#twitter-detail-content,
#twitter-detail-content .tweet,
#twitter-detail-content .tweet-replies {
    background-color: #E7E8EA !important;
    color: #0f1419 !important;
}

#twitter-detail-content .tweet-name,
#twitter-detail-content .tweet-text,
#twitter-detail-content p {
    color: #0f1419 !important;
}

#twitter-detail-content .tweet-handle,
#twitter-detail-content .tweet-time,
#twitter-detail-content .tweet-interactions,
#twitter-detail-content .tweet-interactions span {
    color: #536471 !important;
}

#twitter-detail-content .tweet-avatar-wrap,
#twitter-detail-content .tweet-avatar-wrap span {
    color: #fff !important;
}

/* 推文详情页内的主推文卡片（对标 X 帖内页：头像与昵称/@/时间同一行） */
#twitter-detail-content > .tweet,
#twitter-detail-content > .twitter-x-detail-root > .tweet,
#twitter-detail-content .twitter-detail-main-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 12px !important;
    border-bottom: 1px solid #eff3f4;
    padding: 12px 0 16px !important;
    box-sizing: border-box;
}
#twitter-detail-content .tweet-avatar-col {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: 48px !important;
}
#twitter-detail-content .tweet-content-col {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
}
#twitter-detail-content .tweet-header {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: baseline !important;
    gap: 4px !important;
    line-height: 1.25 !important;
    margin: 0 0 4px !important;
}
#twitter-detail-content .tweet-header .tweet-name,
#twitter-detail-content .tweet-header .tweet-handle,
#twitter-detail-content .tweet-header .tweet-time {
    display: inline !important;
    width: auto !important;
    margin: 0 !important;
}
#twitter-detail-content .tweet-header .tweet-name {
    font-weight: 700 !important;
    font-size: 15px !important;
}
/* 详情页主推文作者名（覆盖上方通用 15px / 模型内联字号，评论区不变） */
#twitter-detail-content > .tweet .tweet-header .tweet-name,
#twitter-detail-content > .twitter-x-detail-root > .tweet .tweet-header .tweet-name,
#twitter-detail-content .twitter-detail-main-card .tweet-header .tweet-name,
#twitter-detail-content > .tweet > .tweet-content-col .tweet-name,
#twitter-detail-content .twitter-detail-main-card .tweet-name {
    font-size: 16px !important;
}
#twitter-detail-content .tweet-header .tweet-handle,
#twitter-detail-content .tweet-header .tweet-time {
    font-size: 14px !important;
}
#twitter-detail-content .tweet-text {
    margin-top: 4px !important;
}

/* 推文详情页内的主推文样式（亮色） - 更大更突出 */
.twitter-detail-content .tweet {
    border-bottom: 1px solid #eff3f4;
    padding: 16px 0 20px;
}
.twitter-detail-content .tweet-name {
    color: #0f1419;
    font-size: 16px;
    font-weight: 800;
}
.twitter-detail-content .tweet-handle,
.twitter-detail-content .tweet-time {
    color: #536471;
    font-size: 15px;
}
.twitter-detail-content .tweet-text {
    color: #0f1419;
    font-size: 18px;
    line-height: 1.4;
    font-weight: 400;
    margin-top: 12px;
}
/* 详情页主推文正文（覆盖模型内联 15px，评论区仍走 .tweet-reply 规则） */
#twitter-detail-content > .tweet .tweet-text,
#twitter-detail-content > .twitter-x-detail-root > .tweet .tweet-text,
#twitter-detail-content .twitter-detail-main-card .tweet-text {
    font-size: 18px !important;
}
.twitter-detail-content .tweet-avatar-wrap {
    background: #1d9bf0;
    width: 48px !important;
    height: 48px !important;
    flex-shrink: 0;
}
.twitter-detail-content .tweet-avatar-wrap img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    display: block !important;
    position: relative !important;
    z-index: 1 !important;
}

/* 主推文的互动数据 - 更大更清晰 */
.twitter-detail-content .tweet-interactions {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #eff3f4;
    font-size: 15px;
    color: #536471;
}

/* 详情页通用头像占位 div：无论模型是否写 class，都能正常显示 */
#twitter-detail-content [style*="border-radius: 50%"],
#twitter-detail-content [style*="border-radius:50%"] {
    width: 48px !important;
    height: 48px !important;
    flex-shrink: 0 !important;
}
#twitter-detail-content [style*="border-radius: 50%"] img,
#twitter-detail-content [style*="border-radius:50%"] img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    display: block !important;
}
#twitter-detail-content .tweet-avatar-wrap,
#twitter-detail-content [class*="avatar"] {
    width: 48px !important;
    height: 48px !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
    border-radius: 50% !important;
}
#twitter-detail-content .tweet-avatar-wrap img,
#twitter-detail-content [class*="avatar"] img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    display: block !important;
}
.twitter-detail-content .tweet-interactions {
    color: #536471;
}

/* ====== 评论区美化升级 ====== */

/* 评论区容器 */
.twitter-comments-section {
    border-top: 1px solid #eff3f4;
    padding-top: 12px;
    margin-top: 12px;
    display: block;
    visibility: visible;
}

/* 评论区标题 */
.twitter-comments-title {
    font-size: 20px;
    font-weight: 800;
    color: #0f1419;
    margin-bottom: 12px;
    padding: 0 0 12px 0;
    border-bottom: 1px solid #eff3f4;
}

/* 详情页内评论区的评论行样式 */
#twitter-detail-content .twitter-comments-section,
#twitter-detail-content .twitter-comments-section * {
    display: block !important;
    visibility: visible !important;
}

/* 评论项基础样式 */
#twitter-detail-content .tweet-reply,
#twitter-detail-content .twitter-x-reply,
#twitter-detail-content .twitter-friend-reply-to-user,
.twitter-comment-item {
    display: flex !important;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #eff3f4;
    align-items: flex-start;
    transition: background-color 0.2s ease;
}

#twitter-detail-content .tweet-reply:hover,
#twitter-detail-content .twitter-x-reply:hover,
#twitter-detail-content .twitter-friend-reply-to-user:hover,
.twitter-comment-item:hover {
    background-color: rgba(0, 0, 0, 0.02);
}

/* 推文UP主回复的特殊样式 - 添加背景高亮 */
#twitter-detail-content .tweet-reply.is-author,
#twitter-detail-content .twitter-x-reply.is-author,
#twitter-detail-content .twitter-friend-reply-to-user.is-author {
    background-color: rgba(29, 155, 240, 0.05);
    border-left: 3px solid #1d9bf0;
    padding-left: 12px;
    margin-left: -12px;
    border-radius: 8px;
}

#twitter-detail-content .tweet-reply.is-author:hover,
#twitter-detail-content .twitter-x-reply.is-author:hover,
#twitter-detail-content .twitter-friend-reply-to-user.is-author:hover {
    background-color: rgba(29, 155, 240, 0.08);
}

/* 头像容器 */
.twitter-comment-avatar-wrap,
#twitter-detail-content .tweet-reply .tweet-avatar-wrap,
#twitter-detail-content .twitter-x-reply .tweet-avatar-wrap {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    overflow: hidden;
    background: #1d9bf0;
}

.twitter-comment-avatar-wrap img,
#twitter-detail-content .tweet-reply .tweet-avatar-wrap img,
#twitter-detail-content .twitter-x-reply .tweet-avatar-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* UP主头像添加蓝色边框 */
#twitter-detail-content .tweet-reply.is-author .tweet-avatar-wrap,
#twitter-detail-content .twitter-x-reply.is-author .tweet-avatar-wrap {
    border: 2px solid #1d9bf0;
    box-shadow: 0 0 0 2px rgba(29, 155, 240, 0.1);
}

/* 评论内容区 */
.twitter-comment-body,
#twitter-detail-content .tweet-reply .tweet-content-col,
#twitter-detail-content .twitter-x-reply .tweet-content-col {
    flex: 1;
    min-width: 0;
}

/* 评论头部信息行 */
.twitter-comment-meta,
#twitter-detail-content .tweet-reply .tweet-header,
#twitter-detail-content .twitter-x-reply .tweet-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}

/* 评论者名字 */
.twitter-comment-name,
#twitter-detail-content .tweet-reply .tweet-name,
#twitter-detail-content .twitter-x-reply .tweet-name {
    font-size: 15px;
    font-weight: 700;
    color: #0f1419;
}

/* UP主名字添加标识 */
#twitter-detail-content .tweet-reply.is-author .tweet-name::after,
#twitter-detail-content .twitter-x-reply.is-author .tweet-name::after {
    content: "作者";
    display: inline-block;
    margin-left: 6px;
    padding: 2px 6px;
    background: #1d9bf0;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    border-radius: 4px;
    vertical-align: middle;
}

/* 评论者handle */
.twitter-comment-handle,
#twitter-detail-content .tweet-reply .tweet-handle,
#twitter-detail-content .twitter-x-reply .tweet-handle {
    font-size: 15px;
    color: #536471;
}

/* 评论时间 */
#twitter-detail-content .tweet-reply .tweet-time,
#twitter-detail-content .twitter-x-reply .tweet-time {
    font-size: 15px;
    color: #536471;
}

#twitter-detail-content .tweet-reply .tweet-time::before,
#twitter-detail-content .twitter-x-reply .tweet-time::before {
    content: "·";
    margin: 0 4px;
    color: #536471;
}

/* 评论正文 */
.twitter-comment-text,
#twitter-detail-content .tweet-reply .tweet-text,
#twitter-detail-content .twitter-x-reply .tweet-text {
    font-size: 15px;
    color: #0f1419;
    line-height: 1.5;
    word-break: break-word;
    white-space: pre-wrap;
}

/* 回复层级缩进 - 二级回复 */
#twitter-detail-content .tweet-reply.is-nested,
#twitter-detail-content .twitter-x-reply.is-nested {
    margin-left: 52px;
    padding-left: 12px;
    border-left: 2px solid #eff3f4;
}

/* 回复目标提示 */
#twitter-detail-content .tweet-reply .reply-to-indicator,
#twitter-detail-content .twitter-x-reply .reply-to-indicator {
    font-size: 13px;
    color: #536471;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
}

#twitter-detail-content .tweet-reply .reply-to-indicator .reply-to-name,
#twitter-detail-content .twitter-x-reply .reply-to-indicator .reply-to-name {
    color: #1d9bf0;
    font-weight: 600;
    display: inline;
}



/* ====== 暗色主题适配 - 评论区美化 ====== */

html[data-appearance="dark"] .twitter-comments-section {
    border-top-color: rgba(255, 255, 255, 0.1);
}

html[data-appearance="dark"] .twitter-comments-title {
    color: #f5f5f7;
}

html[data-appearance="dark"] #twitter-detail-content .tweet-reply,
html[data-appearance="dark"] #twitter-detail-content .twitter-x-reply,
html[data-appearance="dark"] #twitter-detail-content .twitter-friend-reply-to-user {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

html[data-appearance="dark"] #twitter-detail-content .tweet-reply:hover,
html[data-appearance="dark"] #twitter-detail-content .twitter-x-reply:hover,
html[data-appearance="dark"] #twitter-detail-content .twitter-friend-reply-to-user:hover {
    background-color: rgba(255, 255, 255, 0.03);
}

html[data-appearance="dark"] #twitter-detail-content .tweet-reply.is-author,
html[data-appearance="dark"] #twitter-detail-content .twitter-x-reply.is-author,
html[data-appearance="dark"] #twitter-detail-content .twitter-friend-reply-to-user.is-author {
    background-color: rgba(29, 155, 240, 0.1);
    border-left-color: #1d9bf0;
}

html[data-appearance="dark"] #twitter-detail-content .tweet-reply.is-author:hover,
html[data-appearance="dark"] #twitter-detail-content .twitter-x-reply.is-author:hover,
html[data-appearance="dark"] #twitter-detail-content .twitter-friend-reply-to-user.is-author:hover {
    background-color: rgba(29, 155, 240, 0.15);
}

html[data-appearance="dark"] .twitter-comment-name,
html[data-appearance="dark"] #twitter-detail-content .tweet-reply .tweet-name,
html[data-appearance="dark"] #twitter-detail-content .twitter-x-reply .tweet-name {
    color: #f5f5f7;
}

html[data-appearance="dark"] .twitter-comment-handle,
html[data-appearance="dark"] #twitter-detail-content .tweet-reply .tweet-handle,
html[data-appearance="dark"] #twitter-detail-content .twitter-x-reply .tweet-handle,
html[data-appearance="dark"] #twitter-detail-content .tweet-reply .tweet-time,
html[data-appearance="dark"] #twitter-detail-content .twitter-x-reply .tweet-time {
    color: #8b98a5;
}

html[data-appearance="dark"] .twitter-comment-text,
html[data-appearance="dark"] #twitter-detail-content .tweet-reply .tweet-text,
html[data-appearance="dark"] #twitter-detail-content .twitter-x-reply .tweet-text {
    color: #e7e9ea;
}

html[data-appearance="dark"] #twitter-detail-content .tweet-reply.is-nested,
html[data-appearance="dark"] #twitter-detail-content .twitter-x-reply.is-nested {
    border-left-color: rgba(255, 255, 255, 0.1);
}

html[data-appearance="dark"] .twitter-detail-content .tweet {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

html[data-appearance="dark"] .twitter-detail-content .tweet-name {
    color: #f5f5f7;
}

html[data-appearance="dark"] .twitter-detail-content .tweet-handle,
html[data-appearance="dark"] .twitter-detail-content .tweet-time {
    color: #8b98a5;
}

html[data-appearance="dark"] .twitter-detail-content .tweet-text {
    color: #e7e9ea;
}

html[data-appearance="dark"] .twitter-detail-content .tweet-interactions {
    border-top-color: rgba(255, 255, 255, 0.1);
    color: #8b98a5;
}


/* ====== ② 推特暗色基础：#twitter-page 子元素夜间覆盖（顶栏 / 字色 / 时间轴卡片 / .tweet 文本）（来自 style.css L13782-L13833 · 原样迁移） ====== */

html[data-appearance="dark"] #twitter-page .twitter-app-header,
html[data-appearance="dark"] #twitter-page .twitter-feed-tabs,
html[data-appearance="dark"] #twitter-page .twitter-profile-sheet,
html[data-appearance="dark"] #twitter-page .twitter-bottom-nav,
html[data-appearance="dark"] #twitter-page .twitter-compose-modal-content,
html[data-appearance="dark"] #twitter-page .twitter-profile-edit-modal-content,
html[data-appearance="dark"] #twitter-page .twitter-following-picker-modal-content,
html[data-appearance="dark"] #twitter-page .twitter-followers-picker-modal-content,
html[data-appearance="dark"] #twitter-page .twitter-detail-comment-bar {
    background: rgba(28, 28, 30, 0.94);
    color: #f5f5f7;
    border-color: rgba(255, 255, 255, 0.08);
}

html[data-appearance="dark"] #twitter-page .twitter-app-title,
html[data-appearance="dark"] #twitter-page .twitter-feed-tab,
html[data-appearance="dark"] #twitter-page .twitter-profile-name,
html[data-appearance="dark"] #twitter-page .twitter-profile-bio,
html[data-appearance="dark"] #twitter-page .twitter-bottom-label,
html[data-appearance="dark"] #twitter-page .twitter-messages-title,
html[data-appearance="dark"] #twitter-page .twitter-compose-counter,
html[data-appearance="dark"] #twitter-page .twitter-compose-hint,
html[data-appearance="dark"] #twitter-page .twitter-profile-handle,
html[data-appearance="dark"] #twitter-page .twitter-profile-joined,
html[data-appearance="dark"] #twitter-page .twitter-profile-empty,
html[data-appearance="dark"] #twitter-page .twitter-following-picker-name,
html[data-appearance="dark"] #twitter-page .twitter-following-picker-handle,
html[data-appearance="dark"] #twitter-page .twitter-followers-card-title,
html[data-appearance="dark"] #twitter-page .twitter-followers-card-hint {
    color: #f5f5f7;
}

html[data-appearance="dark"] #twitter-page .twitter-feed-panel,
html[data-appearance="dark"] #twitter-page .twitter-body,
html[data-appearance="dark"] #twitter-page .tweet,
html[data-appearance="dark"] #twitter-page .twitter-profile-tab-panel,
html[data-appearance="dark"] #twitter-page .twitter-followers-card,
html[data-appearance="dark"] #twitter-page .twitter-following-picker-item {
    background: rgba(44, 44, 46, 0.94);
    color: #f5f5f7;
    border-color: rgba(255, 255, 255, 0.08);
}

html[data-appearance="dark"] #twitter-page .tweet-text,
html[data-appearance="dark"] #twitter-page .tweet-name,
html[data-appearance="dark"] #twitter-page .tweet-handle,
html[data-appearance="dark"] #twitter-page .tweet-time,
html[data-appearance="dark"] #twitter-page .tweet-interactions,
html[data-appearance="dark"] #twitter-page .tweet-interactions span,
html[data-appearance="dark"] #twitter-page .tweet-interactions svg {
    color: rgba(235, 235, 245, 0.82);
}


/* ====== ③ 推特暗色高级：#twitter-page.active / .twitter-page--profile-bleed / 按钮玻璃质感（来自 style.css L14166-L14228 · 原样迁移） ====== */

html[data-appearance="dark"] #twitter-page.active .books-header,
html[data-appearance="dark"] #twitter-page.active .twitter-app-header {
    background: rgba(24, 24, 28, 0.94) !important;
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

html[data-appearance="dark"] #twitter-page.active .books-header h1,
html[data-appearance="dark"] #twitter-page.active .twitter-app-title,
html[data-appearance="dark"] #twitter-page.active .back-btn,
html[data-appearance="dark"] #twitter-page.active .books-header-btn {
    color: #f5f5f7 !important;
    fill: #f5f5f7 !important;
}

html[data-appearance="dark"] #twitter-page.twitter-page--profile-bleed {
    background: #111112 !important;
    background-image: none !important;
}

html[data-appearance="dark"] #twitter-page.twitter-page--profile-bleed .twitter-app-main,
html[data-appearance="dark"] #twitter-page.twitter-page--profile-bleed .twitter-view-profile,
html[data-appearance="dark"] #twitter-page.twitter-page--profile-bleed .twitter-profile-scroll,
html[data-appearance="dark"] #twitter-page.twitter-page--profile-bleed .twitter-profile-sheet {
    background: #111112 !important;
    background-image: none !important;
}

html[data-appearance="dark"] #twitter-page.twitter-page--profile-bleed .twitter-app-title,
html[data-appearance="dark"] #twitter-page.twitter-page--profile-bleed .twitter-app-title-slash,
html[data-appearance="dark"] #twitter-page.twitter-page--profile-bleed .twitter-app-back.back-btn {
    color: #f5f5f7 !important;
    fill: #f5f5f7 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}

html[data-appearance="dark"] #twitter-page.twitter-page--profile-bleed .twitter-app-back.back-btn {
    background: var(--dark-icon-btn-bg, rgba(72, 72, 76, 0.92)) !important;
    border: 1px solid var(--dark-icon-btn-border, rgba(255, 255, 255, 0.2)) !important;
    box-shadow: var(--dark-icon-btn-shadow, 0 0 0 0.5px rgba(255, 255, 255, 0.1), 0 2px 10px rgba(0, 0, 0, 0.32)) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

html[data-appearance="dark"] #twitter-page .twitter-refresh-btn,
html[data-appearance="dark"] #twitter-page .books-header-btn,
html[data-appearance="dark"] #twitter-page .twitter-profile-edit-btn,
html[data-appearance="dark"] #twitter-page .twitter-feed-tab[role="button"],
html[data-appearance="dark"] #twitter-page .twitter-bottom-btn,
html[data-appearance="dark"] #twitter-page .twitter-comment-submit-btn {
    border: 1px solid var(--dark-icon-btn-border, rgba(255, 255, 255, 0.2)) !important;
    background: var(--dark-icon-btn-bg, rgba(72, 72, 76, 0.92)) !important;
    color: #f5f5f7 !important;
    box-shadow:
        0 0 0 0.5px rgba(255, 255, 255, 0.08),
        0 0 20px rgba(100, 145, 255, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(10px) saturate(130%) !important;
    -webkit-backdrop-filter: blur(10px) saturate(130%) !important;
}

html[data-appearance="dark"] #twitter-page .twitter-bottom-nav {
    box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.1), 0 0 24px rgba(100, 140, 255, 0.12), 0 12px 32px rgba(0, 0, 0, 0.4) !important;
}


/* ====== ④ 推特暗色 tweet 卡片（深玻璃质感）（来自 style.css L35644-L35654 · 原样迁移） ====== */

html[data-appearance="dark"] #twitter-page #twitter-body-following .tweet,
html[data-appearance="dark"] #twitter-page #twitter-body-foryou .tweet,
html[data-appearance="dark"] #twitter-page #twitter-body-entertainment .tweet {
    background: rgba(40, 40, 44, 0.88) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #f5f5f7 !important;
    box-shadow:
        0 0 0 0.5px rgba(255, 255, 255, 0.06),
        0 0 20px rgba(100, 140, 255, 0.1),
        0 8px 22px rgba(0, 0, 0, 0.32) !important;
}


/* ====== ⑤ 推特暗色 .twitter-bottom-btn.active（来自 style.css L35678-L35681 · 原样迁移） ====== */

html[data-appearance="dark"] #twitter-page .twitter-bottom-btn.active {
    background: rgba(80, 120, 200, 0.22) !important;
    box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.1), 0 0 16px rgba(100, 140, 255, 0.14);
}


/* ====== ⑥ 推特 DM 私信：root / header / list / chat / msg / quote / composer / emoji / settings / multiselect + 暗色派生 + DM overlay（来自 style.css L40723-L41908 · 原样迁移） ====== */

/* ============================================================
 * 推特 · 私信（DM） — Insta 私聊风 + 低饱和蓝灰
 *
 * 设计目标：跟原推特页（X 风）有视觉区分，但仍属同一 App；
 * 主色：#dde4ec / #c8d3e1 / #8fa0b8，几乎不出现彩色，
 * 用户与对方气泡通过"半透明+磨砂"和形状变化区分。
 * ============================================================ */

.twitter-dm-root {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #f5f7fb 0%, #e8edf3 100%);
    color: #2d3a4d;
    overflow: hidden;
    position: relative;
}

.twitter-dm-header {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 14px 8px;
    background: rgba(245, 247, 251, 0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(155, 175, 200, 0.18);
    position: sticky;
    top: 0;
    z-index: 4;
}

.twitter-dm-header-title {
    font-size: 17px;
    font-weight: 600;
    color: #34465c;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.twitter-dm-header-back {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(212, 222, 235, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(155, 175, 200, 0.32);
    color: #455872;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease;
}

.twitter-dm-header-back:hover {
    background: rgba(190, 205, 222, 0.7);
}

.twitter-dm-header-actions {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.twitter-dm-header-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(212, 222, 235, 0.55);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(155, 175, 200, 0.32);
    color: #455872;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: background 0.15s ease, transform 0.1s ease;
}

.twitter-dm-header-btn:hover {
    background: rgba(190, 205, 222, 0.78);
}

.twitter-dm-header-btn:active {
    transform: scale(0.94);
}

.twitter-dm-header-btn svg {
    width: 18px;
    height: 18px;
    stroke-width: 1.75;
}

/* ── 列表态右上角悬浮的设置齿轮（避免与页级头栏「消息」标题重复） ── */
.twitter-dm-floating-settings {
    position: absolute;
    top: 12px;
    right: 14px;
    z-index: 6;
}

/* ── 会话列表（消息主页：已关注 Char 头像横排 + 详细对话列表） ── */
.twitter-dm-list-view {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 12px 0 24px;
}

.twitter-dm-follow-strip {
    padding: 6px 14px 14px;
    border-bottom: 1px solid rgba(155, 175, 200, 0.16);
}

.twitter-dm-follow-strip-title {
    font-size: 13px;
    color: #6f819a;
    font-weight: 500;
    margin: 2px 0 8px;
}

.twitter-dm-follow-strip-scroll {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
}

.twitter-dm-follow-strip-scroll::-webkit-scrollbar {
    display: none;
}

.twitter-dm-follow-item {
    flex: 0 0 auto;
    width: 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: opacity 0.18s;
}

.twitter-dm-follow-item:active {
    opacity: 0.72;
}

.twitter-dm-follow-item-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #d0d9e6 0%, #aab9cd 100%);
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(102, 122, 152, 0.18);
    background-size: cover;
    background-position: center;
    flex: 0 0 auto;
    overflow: hidden;
    position: relative;
}

.twitter-dm-follow-item-avatar.has-unread::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 2px solid #6c84a8;
    pointer-events: none;
}

.twitter-dm-follow-item-name {
    font-size: 12px;
    color: #4a5b75;
    text-align: center;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.twitter-dm-conv-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.twitter-dm-conv-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.twitter-dm-conv-item:hover,
.twitter-dm-conv-item:focus {
    background: rgba(208, 219, 232, 0.42);
}

.twitter-dm-conv-avatar {
    flex: 0 0 auto;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: linear-gradient(135deg, #d0d9e6 0%, #aab9cd 100%);
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

.twitter-dm-conv-body {
    flex: 1 1 auto;
    min-width: 0;
}

.twitter-dm-conv-name-row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: baseline;
}

.twitter-dm-conv-name {
    font-size: 15px;
    font-weight: 600;
    color: #2d3a4d;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1 1 auto;
}

.twitter-dm-conv-peer-type {
    font-size: 11px;
    color: #8a9bb3;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(200, 213, 230, 0.4);
    flex: 0 0 auto;
}

.twitter-dm-conv-time {
    font-size: 11px;
    color: #8a9bb3;
    flex: 0 0 auto;
}

.twitter-dm-conv-preview {
    font-size: 13px;
    color: #6f819a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 2px;
}

.twitter-dm-conv-unread {
    flex: 0 0 auto;
    min-width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    border-radius: 999px;
    background: #6c84a8;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 0 5px;
    margin-left: 6px;
}

.twitter-dm-list-empty {
    padding: 64px 24px;
    text-align: center;
    color: #8a9bb3;
    font-size: 14px;
}

/* ── 私聊气泡视图 ── */
.twitter-dm-chat-view {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.twitter-dm-chat-peer-info {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
}

.twitter-dm-chat-peer-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #d0d9e6 0%, #aab9cd 100%);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

.twitter-dm-chat-peer-meta {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.twitter-dm-chat-peer-name {
    font-size: 15px;
    font-weight: 600;
    color: #2d3a4d;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.twitter-dm-chat-peer-handle {
    font-size: 12px;
    color: #8a9bb3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.twitter-dm-chat-body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.twitter-dm-msg {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    max-width: 100%;
}

.twitter-dm-msg.from-peer {
    justify-content: flex-start;
}

.twitter-dm-msg.from-user {
    justify-content: flex-end;
}

.twitter-dm-msg-sender {
    font-size: 11.5px;
    font-weight: 600;
    color: #6f819a;
    line-height: 1.25;
    margin-bottom: 3px;
    padding: 0 4px;
    max-width: 100%;
}

.twitter-dm-msg.from-peer .twitter-dm-msg-sender {
    text-align: left;
}

.twitter-dm-msg.from-user .twitter-dm-msg-sender {
    text-align: right;
}

.twitter-dm-msg-bubble {
    max-width: 100%;
    padding: 9px 13px;
    border-radius: 18px;
    font-size: 14.5px;
    line-height: 1.5;
    color: #2d3a4d;
    word-break: break-word;
    white-space: pre-wrap;
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(168, 184, 204, 0.28);
    box-shadow: 0 1px 3px rgba(102, 122, 152, 0.08);
}

.twitter-dm-msg.from-user .twitter-dm-msg-bubble {
    background: linear-gradient(140deg, rgba(120, 144, 178, 0.92), rgba(94, 119, 153, 0.92));
    color: #fff;
    border-color: rgba(94, 119, 153, 0.6);
    border-bottom-right-radius: 6px;
}

.twitter-dm-msg.from-peer .twitter-dm-msg-bubble {
    border-bottom-left-radius: 6px;
}

/* Char/User 双语回复：识别全角（）、半角()、直角「」包住的中文译文并分层展示 */
.twitter-dm-cn-translation {
    display: inline;
    opacity: 0.9;
    white-space: pre-wrap;
    word-break: break-word;
}

.twitter-dm-msg.from-peer .twitter-dm-cn-translation {
    opacity: 0.88;
    margin-left: 2px;
    font-weight: 500;
    color: #243347;
}

.twitter-dm-msg.from-user .twitter-dm-cn-translation {
    opacity: 0.93;
    color: rgba(255, 255, 255, 0.92);
}

.twitter-dm-msg-meta {
    font-size: 10.5px;
    color: #a3b3c8;
    margin-top: 4px;
    padding: 0 4px;
}

.twitter-dm-msg.from-user .twitter-dm-msg-meta {
    text-align: right;
}

.twitter-dm-msg-forward-card {
    margin-top: 6px;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.4);
    border: 1px dashed rgba(146, 165, 188, 0.45);
    color: #4a5b75;
    font-size: 12px;
    line-height: 1.45;
}

.twitter-dm-msg.from-user .twitter-dm-msg-forward-card {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.35);
    color: #f1f5fb;
}

.twitter-dm-msg-forward-card-title {
    font-weight: 600;
    margin-bottom: 2px;
}

.twitter-dm-msg-typing {
    padding-left: 10px;
    color: #8a9bb3;
    font-size: 12px;
    font-style: italic;
}

/* 系统提示气泡（例如：私信权限受限） */
.twitter-dm-msg.is-system {
    justify-content: center;
}

.twitter-dm-msg.is-system .twitter-dm-msg-bubble {
    background: rgba(214, 225, 240, 0.55);
    color: #6f819a;
    font-size: 12px;
    border-style: dashed;
    border-radius: 12px;
    text-align: center;
}

/* ── 输入栏 + 磨砂玻璃圆形按钮 ── */
.twitter-dm-composer {
    flex: 0 0 auto;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(245, 247, 251, 0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid rgba(155, 175, 200, 0.18);
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.twitter-dm-composer-btn {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    border-radius: 50%;
    border: 1px solid rgba(155, 175, 200, 0.36);
    background: rgba(220, 230, 244, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #455872;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: transform 0.1s ease, background 0.15s ease;
    box-shadow: 0 2px 6px rgba(102, 122, 152, 0.1) inset;
}

.twitter-dm-composer-btn:hover {
    background: rgba(206, 220, 238, 0.72);
}

.twitter-dm-composer-btn:active {
    transform: scale(0.92);
}

.twitter-dm-composer-btn svg {
    width: 18px;
    height: 18px;
    stroke-width: 1.8;
}

.twitter-dm-composer-input-wrap {
    flex: 1 1 auto;
    min-width: 0;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 20px;
    border: 1px solid rgba(168, 184, 204, 0.32);
    padding: 6px 12px;
    display: flex;
    align-items: center;
}

.twitter-dm-composer-input {
    flex: 1 1 auto;
    border: 0;
    background: transparent;
    outline: none;
    resize: none;
    font: inherit;
    font-size: 14.5px;
    color: #2d3a4d;
    min-height: 24px;
    max-height: 110px;
    line-height: 1.5;
    padding: 2px 0;
}

.twitter-dm-composer-input::placeholder {
    color: #a3b3c8;
}

.twitter-dm-composer-send {
    background: linear-gradient(140deg, #7e95b8, #5f7ba3);
    color: #fff;
    border-color: rgba(95, 123, 163, 0.7);
    box-shadow: 0 2px 8px rgba(95, 123, 163, 0.35);
}

.twitter-dm-composer-send:hover {
    background: linear-gradient(140deg, #8aa1c5, #6a87b0);
}

.twitter-dm-composer-send[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
}

/* ── 表情面板（推特 DM 专用，复用 emojiData） ── */
.twitter-dm-emoji-panel {
    flex: 0 0 auto;
    max-height: 0;
    overflow: hidden;
    background: rgba(244, 247, 252, 0.94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(155, 175, 200, 0.18);
    transition: max-height 0.22s ease;
}

.twitter-dm-emoji-panel.is-open {
    max-height: 240px;
}

.twitter-dm-emoji-panel-grid {
    padding: 10px 12px 14px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
    gap: 8px;
    max-height: 220px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.twitter-dm-emoji-item {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(168, 184, 204, 0.22);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    transition: transform 0.1s ease, background 0.15s ease;
}

.twitter-dm-emoji-item:hover {
    background: rgba(208, 219, 232, 0.65);
}

.twitter-dm-emoji-item:active {
    transform: scale(0.92);
}

.twitter-dm-emoji-item img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.twitter-dm-emoji-empty {
    grid-column: 1 / -1;
    padding: 22px 12px;
    text-align: center;
    color: #8a9bb3;
    font-size: 13px;
}

/* ── 设置弹窗 ── */
.twitter-dm-settings-modal .modal-content {
    max-width: 360px;
    background: linear-gradient(180deg, #f6f9fc 0%, #e9eff7 100%);
    color: #2d3a4d;
}

.twitter-dm-settings-section {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 4px;
    border-bottom: 1px solid rgba(155, 175, 200, 0.18);
}

.twitter-dm-settings-section:last-child {
    border-bottom: 0;
}

.twitter-dm-settings-label {
    flex: 1 1 auto;
    min-width: 0;
}

.twitter-dm-settings-title {
    font-size: 14.5px;
    font-weight: 600;
    color: #34465c;
    margin-bottom: 2px;
}

.twitter-dm-settings-desc {
    font-size: 12px;
    color: #6f819a;
    line-height: 1.45;
}

.twitter-dm-switch {
    position: relative;
    width: 46px;
    height: 26px;
    flex: 0 0 auto;
    cursor: pointer;
}

.twitter-dm-switch input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.twitter-dm-switch-track {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: rgba(180, 195, 215, 0.6);
    transition: background 0.18s ease;
}

.twitter-dm-switch-knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(60, 80, 110, 0.25);
    transition: transform 0.18s ease;
}

.twitter-dm-switch input:checked ~ .twitter-dm-switch-track {
    background: #6c84a8;
}

.twitter-dm-switch input:checked ~ .twitter-dm-switch-knob {
    transform: translateX(20px);
}

/* 暗色主题 */
html[data-appearance="dark"] .twitter-dm-root,
html[data-appearance="dark"] .twitter-dm-settings-modal .modal-content {
    background: linear-gradient(180deg, #1f2630 0%, #161b22 100%);
    color: #d6dee8;
}

html[data-appearance="dark"] .twitter-dm-header,
html[data-appearance="dark"] .twitter-dm-composer {
    background: rgba(28, 35, 44, 0.92);
    border-color: rgba(140, 160, 188, 0.22);
}

html[data-appearance="dark"] .twitter-dm-header-title,
html[data-appearance="dark"] .twitter-dm-chat-peer-name {
    color: #d8e1ed;
}

html[data-appearance="dark"] .twitter-dm-msg-bubble {
    background: rgba(50, 60, 76, 0.78);
    color: #e2eaf3;
    border-color: rgba(120, 140, 168, 0.36);
}

html[data-appearance="dark"] .twitter-dm-msg.from-user .twitter-dm-msg-bubble {
    background: linear-gradient(140deg, rgba(120, 144, 178, 0.92), rgba(74, 99, 133, 0.92));
}

html[data-appearance="dark"] .twitter-dm-msg.from-peer .twitter-dm-cn-translation {
    color: #c9d6e8;
}

html[data-appearance="dark"] .twitter-dm-msg.from-user .twitter-dm-cn-translation {
    color: rgba(255, 255, 255, 0.94);
}

html[data-appearance="dark"] .twitter-dm-msg-sender {
    color: #98aac4;
}

html[data-appearance="dark"] .twitter-dm-conv-name {
    color: #d6dee8;
}

html[data-appearance="dark"] .twitter-dm-conv-preview,
html[data-appearance="dark"] .twitter-dm-conv-time,
html[data-appearance="dark"] .twitter-dm-conv-peer-type {
    color: #8295ae;
}

/* ============================================================
 * 推特 · 私信（DM） — 增量样式：
 *   1) 页级头栏右上角的「私信设置」齿轮（与「消息」同一行）
 *   2) 私聊视图作为「全屏覆盖层」 — 把页级头栏 + 底栏一并遮住
 *   3) 长按气泡上下文菜单
 *   4) 多选态底栏 / 选中样式
 *   5) 引用条
 *   6) 「已编辑」标识
 * ============================================================ */

/* —— 1) 页级头栏齿轮（与「消息」同一行） —— */
.twitter-dm-page-settings-btn {
    background: transparent;
    border: 0;
    color: inherit;
    padding: 6px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease;
    width: 36px;
    height: 36px;
    justify-self: end;
}

.twitter-dm-page-settings-btn:hover {
    background: rgba(0, 0, 0, 0.06);
}

.twitter-dm-page-settings-btn svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
}

/* （兼容）消息 Tab 打开设置入口时的类名保留；顶栏栅格已由 .twitter-app-header-right 统一为三列布局 */
html[data-appearance="dark"] .twitter-dm-page-settings-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}

/* —— 2) 私聊视图：全屏覆盖（顶/底栏一起遮）—— */
/* 关键：默认 .twitter-app-main 是 position:relative，DM 根容器在它下层无法越过；
 * 进入聊天覆盖态后，把 .twitter-app-main 临时改为 static，让 DM 根容器以 #twitter-page
 * （position:relative）作为定位锚点，从而真正覆盖整页（含顶栏「消息」和底栏「主页/消息/我」）。 */
/* #twitter-page 的 DOM class 为 "page"，须用 id 选择器；原先误写成 .twitter-page 导致规则永远不生效 */
#twitter-page.twitter-page--dm-chat-overlay .twitter-app-main {
    position: static;
}

/* 私信气泡页：整块盖住页级「消息」栏与底栏 Tab，避免后面的兄弟节点 (.twitter-bottom-nav) 绘制在多选条之上；
 * 同时让 flex 主区占满高度，聊天可视区域更大。 */
#twitter-page.twitter-page--dm-chat-overlay .twitter-bottom-nav,
#twitter-page.twitter-page--dm-chat-overlay .twitter-app-header {
    display: none !important;
}

#twitter-page.twitter-page--dm-chat-overlay #twitter-fab-compose {
    display: none !important;
}

/* DM 根容器：聊天态时把自己拉到整个 twitter-page 同尺寸的浮层 */
.twitter-dm-root[data-dm-chat-overlay="on"] {
    position: absolute;
    inset: 0;
    z-index: 80; /* 高于 twitter-detail-page（50），低于全局 modal（一般 1000+） */
    /* 不透明背景，把页级头栏 + 底栏一并遮住，避免穿透 */
    background: linear-gradient(180deg, #f5f7fb 0%, #e8edf3 100%);
}

html[data-appearance="dark"] .twitter-dm-root[data-dm-chat-overlay="on"] {
    background: linear-gradient(180deg, #1f2630 0%, #161b22 100%);
}

.twitter-dm-root[data-dm-chat-overlay="on"] .twitter-dm-chat-view {
    height: 100%;
}

/* —— 3) 长按气泡上下文菜单 —— */
.twitter-dm-context-menu {
    z-index: 9999;
    min-width: 168px;
    background: rgba(248, 250, 253, 0.96);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(155, 175, 200, 0.36);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(40, 60, 90, 0.18);
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.twitter-dm-context-menu-item {
    appearance: none;
    background: transparent;
    border: 0;
    width: 100%;
    text-align: left;
    padding: 8px 12px;
    font-size: 14px;
    color: #2d3a4d;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.12s ease;
}

.twitter-dm-context-menu-item:hover {
    background: rgba(155, 175, 200, 0.2);
}

/* —— 4) 多选态 —— */
/* 默认不占位、不可见；仅凭 data-dm-multiselect="on" 展开（避免 display:flex 盖掉 HTML hidden） */
.twitter-dm-multiselect-bar {
    display: none !important;
    flex: 0 0 auto;
    align-items: center;
    gap: 10px;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
    background: rgba(245, 247, 251, 0.96);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(155, 175, 200, 0.18);
}

.twitter-dm-root[data-dm-multiselect="on"] .twitter-dm-multiselect-bar {
    display: flex !important;
}

/* 多选顶栏：盖住原会话头（返回 + 头像 + 昵称那一行） */
.twitter-dm-multiselect-topbar {
    display: none !important;
    flex: 0 0 auto;
    align-items: center;
    gap: 10px;
    padding: 10px 14px 8px;
    background: rgba(245, 247, 251, 0.96);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(155, 175, 200, 0.22);
    z-index: 6;
}

.twitter-dm-root[data-dm-multiselect="on"] .twitter-dm-multiselect-topbar {
    display: flex !important;
}

.twitter-dm-root[data-dm-multiselect="on"] .twitter-dm-chat-header {
    display: none !important;
}

.twitter-dm-root[data-dm-multiselect="on"] .twitter-dm-composer {
    display: none !important;
}

.twitter-dm-root[data-dm-multiselect="on"] .twitter-dm-quote-bar {
    display: none !important;
}

.twitter-dm-root[data-dm-multiselect="on"] .twitter-dm-emoji-panel.is-open {
    max-height: 0 !important;
}

.twitter-dm-multiselect-topbar-back {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(155, 175, 200, 0.32);
    background: rgba(212, 222, 235, 0.55);
    color: #455872;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: background 0.15s ease;
}

.twitter-dm-multiselect-topbar-back:hover {
    background: rgba(190, 205, 222, 0.72);
}

.twitter-dm-multiselect-topbar-back svg {
    width: 18px;
    height: 18px;
    stroke-width: 1.8;
}

.twitter-dm-multiselect-topbar-title {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 15px;
    font-weight: 600;
    color: #34465c;
    text-align: center;
}

.twitter-dm-multiselect-count {
    flex: 1 1 auto;
    font-size: 13px;
    color: #4a5b75;
}

.twitter-dm-multiselect-btn {
    appearance: none;
    border: 1px solid rgba(155, 175, 200, 0.4);
    background: rgba(220, 230, 244, 0.55);
    color: #34465c;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease;
}

.twitter-dm-multiselect-btn:hover {
    background: rgba(206, 220, 238, 0.78);
}

.twitter-dm-multiselect-btn:active {
    transform: scale(0.96);
}

.twitter-dm-multiselect-btn.is-danger {
    color: #fff;
    background: linear-gradient(140deg, #c46b6b, #a55858);
    border-color: rgba(165, 88, 88, 0.6);
}

.twitter-dm-multiselect-btn.is-ghost {
    background: transparent;
}

.twitter-dm-multiselect-btn:disabled,
.twitter-dm-multiselect-btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}

.twitter-dm-root[data-dm-multiselect="on"] .twitter-dm-msg {
    cursor: pointer;
    user-select: none;
    /* 多选时把整行改为「与气泡中线对齐」：默认 align-items:flex-end 会让圆点贴到 meta 时间那一行，
     * 视觉上像"圆点都靠左下"。改成 center 后，圆点会与列的垂直中线（≈气泡中心）对齐。 */
    align-items: center !important;
}

.twitter-dm-msg.is-selected .twitter-dm-msg-bubble {
    outline: 2px solid #7e95b8;
    outline-offset: 2px;
}

.twitter-dm-msg-select {
    width: 0;
    height: 0;
    flex: 0 0 auto;
    align-self: center;
}

.twitter-dm-root[data-dm-multiselect="on"] .twitter-dm-msg-select {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1.5px solid #aebbcd;
    background: rgba(255, 255, 255, 0.78);
    align-self: center;
    flex: 0 0 20px;
    /* 与气泡保持小间隔，确保「圆点 → 气泡」是同一视觉单元 */
    margin: 0 2px;
}

.twitter-dm-root[data-dm-multiselect="on"] .twitter-dm-msg.is-selected .twitter-dm-msg-select {
    background: #7e95b8;
    border-color: #5f7ba3;
    box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 5px #7e95b8;
}

/* 多选时让用户消息（右贴边）的圆点紧跟在气泡前方：默认 justify-content: flex-end 会让
 * [select, col] 整体贴右，但列受 max-width:74% 约束时 select 会被推到 viewport 左侧；
 * 这里给 select 一个 margin-left:auto 让它先吃掉剩余空白，紧贴 col 左边沿。 */
.twitter-dm-root[data-dm-multiselect="on"] .twitter-dm-msg.from-user .twitter-dm-msg-select {
    margin-left: auto;
}

/* —— Char/peer 消息的圆点位置镜像 ——
 * DOM 顺序是 [select][col]，对 from-peer 来说默认就会把圆点甩到 viewport 最左边、和气泡（贴左 74% 列）拉开很远，
 * 视觉上像“user 圆点贴气泡 / peer 圆点贴边”，方向感不一致。
 * 把 from-peer 的 select 用 flex order 移到 col 之后，圆点就出现在气泡右侧（朝向屏幕中线），与 user 镜像对称。 */
.twitter-dm-root[data-dm-multiselect="on"] .twitter-dm-msg.from-peer .twitter-dm-msg-select {
    order: 1;
    /* 紧贴气泡右沿，与 .twitter-dm-msg 的 gap 共同形成 8px+2px 间距 */
    margin-left: 0;
    margin-right: 2px;
}

/* —— 合并/跨应用转发折叠卡（私信内）—— */
.twitter-dm-msg-merged-card {
    width: 100%;
    max-width: 280px;
    border: 1px solid rgba(150, 166, 186, 0.34);
    border-radius: 16px;
    padding: 11px 12px;
    text-align: left;
    background: linear-gradient(180deg, rgba(235, 241, 247, 0.98) 0%, rgba(219, 228, 238, 0.98) 100%);
    color: #263340;
    box-shadow: 0 6px 14px rgba(95, 113, 132, 0.14);
    cursor: pointer;
    display: block;
}

.twitter-dm-msg-merged-card:active {
    transform: translateY(1px);
}

.twitter-dm-msg-merged-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.twitter-dm-msg-merged-kicker {
    font-size: 11px;
    letter-spacing: 0.06em;
    color: #6f7d90;
    font-weight: 600;
}

.twitter-dm-msg-merged-count {
    font-size: 11px;
    color: #5f6f83;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.62);
}

.twitter-dm-msg-merged-title {
    font-size: 13.5px;
    font-weight: 700;
    color: #1f2b38;
    margin-bottom: 3px;
    line-height: 1.3;
}

.twitter-dm-msg-merged-summary {
    font-size: 11.5px;
    color: #5e6f83;
    margin-bottom: 8px;
    line-height: 1.45;
}

.twitter-dm-msg-merged-preview {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 8px;
}

.twitter-dm-msg-merged-item {
    padding: 6px 8px;
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(178, 190, 205, 0.26);
}

.twitter-dm-msg-merged-item-sender {
    font-size: 10.5px;
    font-weight: 700;
    color: #506073;
    margin-bottom: 2px;
}

.twitter-dm-msg-merged-item-content {
    font-size: 11.5px;
    color: #2b3a48;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    word-break: break-word;
}

.twitter-dm-msg-merged-expand {
    font-size: 11px;
    color: #5f7084;
    text-align: center;
    padding-top: 1px;
}

/* User 侧（蓝色气泡内）的折叠卡：让浅色基调反向变深，保留可读性 */
.twitter-dm-msg.from-user .twitter-dm-msg-merged-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.10) 100%);
    border-color: rgba(255, 255, 255, 0.34);
    color: #f1f5fb;
    box-shadow: none;
}

.twitter-dm-msg.from-user .twitter-dm-msg-merged-kicker,
.twitter-dm-msg.from-user .twitter-dm-msg-merged-count,
.twitter-dm-msg.from-user .twitter-dm-msg-merged-title,
.twitter-dm-msg.from-user .twitter-dm-msg-merged-summary,
.twitter-dm-msg.from-user .twitter-dm-msg-merged-expand {
    color: rgba(255, 255, 255, 0.92);
}

.twitter-dm-msg.from-user .twitter-dm-msg-merged-count {
    background: rgba(255, 255, 255, 0.22);
}

.twitter-dm-msg.from-user .twitter-dm-msg-merged-item {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.24);
}

.twitter-dm-msg.from-user .twitter-dm-msg-merged-item-sender {
    color: rgba(255, 255, 255, 0.92);
}

.twitter-dm-msg.from-user .twitter-dm-msg-merged-item-content {
    color: rgba(255, 255, 255, 0.88);
}

/* 暗色主题 */
html[data-appearance="dark"] .twitter-dm-msg-merged-card,
.is-dark-mode .twitter-dm-msg-merged-card {
    background: linear-gradient(180deg, rgba(48, 60, 76, 0.94) 0%, rgba(38, 50, 66, 0.94) 100%);
    border-color: rgba(140, 160, 186, 0.32);
    color: #e3eaf2;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.32);
}

html[data-appearance="dark"] .twitter-dm-msg-merged-kicker,
html[data-appearance="dark"] .twitter-dm-msg-merged-summary,
.is-dark-mode .twitter-dm-msg-merged-kicker,
.is-dark-mode .twitter-dm-msg-merged-summary {
    color: #a7b5c8;
}

html[data-appearance="dark"] .twitter-dm-msg-merged-title,
.is-dark-mode .twitter-dm-msg-merged-title {
    color: #f0f4fa;
}

html[data-appearance="dark"] .twitter-dm-msg-merged-item,
.is-dark-mode .twitter-dm-msg-merged-item {
    background: rgba(60, 72, 90, 0.78);
    border-color: rgba(150, 168, 192, 0.24);
}

html[data-appearance="dark"] .twitter-dm-msg-merged-item-sender,
.is-dark-mode .twitter-dm-msg-merged-item-sender {
    color: #b8c4d6;
}

html[data-appearance="dark"] .twitter-dm-msg-merged-item-content,
.is-dark-mode .twitter-dm-msg-merged-item-content {
    color: #dde4ee;
}

/* —— 跨应用转发模态（私信内多选转发的目标选择器）—— */
.twitter-dm-cross-forward-modal .modal-content {
    width: min(380px, 92vw);
    max-height: min(86vh, 600px);
    display: flex;
    flex-direction: column;
    padding-bottom: 12px;
}

.twitter-dm-cross-forward-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 4px 14px 0;
    -webkit-overflow-scrolling: touch;
}

.twitter-dm-cross-forward-section-title {
    font-size: 11.5px;
    font-weight: 700;
    color: #6f7d90;
    letter-spacing: 0.04em;
    padding: 10px 4px 6px;
    border-top: 1px solid rgba(150, 166, 186, 0.18);
}

.twitter-dm-cross-forward-section-title:first-child {
    border-top: none;
    padding-top: 4px;
}

.twitter-dm-cross-forward-empty {
    font-size: 12px;
    color: #95a3b6;
    padding: 6px 4px 8px;
}

.twitter-dm-cross-forward-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 4px;
    border-radius: 10px;
    cursor: pointer;
}

.twitter-dm-cross-forward-row:hover,
.twitter-dm-cross-forward-row:active {
    background: rgba(150, 166, 186, 0.14);
}

.twitter-dm-cross-forward-row-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #c8d6e8, #aeb9ce);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: cover;
    background-position: center;
    font-size: 14px;
    font-weight: 700;
    flex: 0 0 36px;
}

.twitter-dm-cross-forward-row-body {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.twitter-dm-cross-forward-row-name {
    font-size: 13.5px;
    color: #2d3a4d;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.twitter-dm-cross-forward-row-meta {
    font-size: 11.5px;
    color: #788698;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

html[data-appearance="dark"] .twitter-dm-cross-forward-section-title,
.is-dark-mode .twitter-dm-cross-forward-section-title {
    color: #a7b5c8;
    border-top-color: rgba(140, 160, 186, 0.22);
}

html[data-appearance="dark"] .twitter-dm-cross-forward-row-name,
.is-dark-mode .twitter-dm-cross-forward-row-name {
    color: #e6ecf3;
}

html[data-appearance="dark"] .twitter-dm-cross-forward-row-meta,
.is-dark-mode .twitter-dm-cross-forward-row-meta {
    color: #95a3b6;
}

/* 消息列内嵌的引用条（在气泡上方） */
.twitter-dm-msg-col {
    display: flex;
    flex-direction: column;
    flex: 0 1 auto;
    min-width: 0;
    max-width: 74%;
}

.twitter-dm-msg.from-user .twitter-dm-msg-col {
    align-items: flex-end;
}

.twitter-dm-msg.from-peer .twitter-dm-msg-col {
    align-items: flex-start;
}

.twitter-dm-msg-quoted {
    margin: 0 0 4px;
    padding: 6px 9px;
    border-left: 3px solid #aebbcd;
    background: rgba(220, 230, 244, 0.55);
    border-radius: 6px;
    font-size: 12px;
    color: #51637c;
    max-width: 240px;
    word-break: break-word;
}

.twitter-dm-msg-quoted-name {
    font-weight: 600;
    margin-bottom: 1px;
    color: #2d3a4d;
}

.twitter-dm-msg.from-user .twitter-dm-msg-quoted {
    margin-left: auto;
    border-left: 0;
    border-right: 3px solid rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.18);
    color: #eef3fb;
}

.twitter-dm-msg.from-user .twitter-dm-msg-quoted-name {
    color: #ffffff;
}

/* —— 5) 引用条（composer 上方） —— */
.twitter-dm-quote-bar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: rgba(220, 230, 244, 0.6);
    border-top: 1px solid rgba(155, 175, 200, 0.18);
    border-bottom: 1px solid rgba(155, 175, 200, 0.12);
    font-size: 12px;
    color: #4a5b75;
}

.twitter-dm-quote-bar[hidden] {
    display: none !important;
}

.twitter-dm-quote-bar-text {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.twitter-dm-quote-bar-close {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid rgba(155, 175, 200, 0.36);
    background: rgba(255, 255, 255, 0.7);
    color: #4a5b75;
    cursor: pointer;
    line-height: 1;
}

.twitter-dm-msg-edited {
    margin-left: 6px;
    color: #a3b3c8;
    font-size: 10px;
}

/* —— 编辑提示条：和引用条同构，但用强调色让"正在改写已发消息"更显眼 —— */
.twitter-dm-edit-bar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: rgba(232, 224, 250, 0.72);
    border-top: 1px solid rgba(150, 132, 210, 0.28);
    border-bottom: 1px solid rgba(150, 132, 210, 0.16);
    font-size: 12px;
    color: #4a3f7a;
}

.twitter-dm-edit-bar[hidden] {
    display: none !important;
}

.twitter-dm-edit-bar-icon {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    color: #6c54b8;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.twitter-dm-edit-bar-icon svg {
    width: 14px;
    height: 14px;
    stroke-width: 2;
}

.twitter-dm-edit-bar-text {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}

.twitter-dm-edit-bar-close {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid rgba(150, 132, 210, 0.4);
    background: rgba(255, 255, 255, 0.7);
    color: #4a3f7a;
    cursor: pointer;
    line-height: 1;
}

/* 编辑态时给输入框一个柔和强调环（textarea 本身没有 :has(...) 兜底场景里仍可生效） */
.twitter-dm-root[data-dm-editing-id] .twitter-dm-composer-input {
    box-shadow: 0 0 0 1px rgba(108, 84, 184, 0.45) inset;
    background: rgba(248, 244, 255, 0.85);
}

/* 多选态下不应同时露出编辑条（多选优先级更高，编辑要在多选退出后才能继续） */
.twitter-dm-root[data-dm-multiselect="on"] .twitter-dm-edit-bar {
    display: none !important;
}

/* —— 暗色主题 —— */
html[data-appearance="dark"] .twitter-dm-context-menu {
    background: rgba(34, 42, 54, 0.96);
    border-color: rgba(140, 160, 188, 0.34);
}

html[data-appearance="dark"] .twitter-dm-context-menu-item {
    color: #d6dee8;
}

html[data-appearance="dark"] .twitter-dm-context-menu-item:hover {
    background: rgba(108, 132, 168, 0.22);
}

html[data-appearance="dark"] .twitter-dm-multiselect-bar,
html[data-appearance="dark"] .twitter-dm-multiselect-topbar,
html[data-appearance="dark"] .twitter-dm-quote-bar {
    background: rgba(28, 35, 44, 0.92);
    border-color: rgba(140, 160, 188, 0.22);
}

html[data-appearance="dark"] .twitter-dm-multiselect-topbar {
    border-bottom-color: rgba(140, 160, 188, 0.22);
}

html[data-appearance="dark"] .twitter-dm-multiselect-topbar-title {
    color: #d6dee8;
}

html[data-appearance="dark"] .twitter-dm-multiselect-topbar-back {
    background: rgba(60, 72, 90, 0.55);
    border-color: rgba(140, 160, 188, 0.35);
    color: #d6dee8;
}

html[data-appearance="dark"] .twitter-dm-msg-quoted {
    background: rgba(50, 60, 76, 0.6);
    color: #a9b9cf;
}

html[data-appearance="dark"] .twitter-dm-edit-bar {
    background: rgba(48, 38, 72, 0.85);
    border-top-color: rgba(170, 150, 230, 0.34);
    border-bottom-color: rgba(170, 150, 230, 0.18);
    color: #d8ccff;
}

html[data-appearance="dark"] .twitter-dm-edit-bar-icon {
    color: #b9a5ff;
}

html[data-appearance="dark"] .twitter-dm-edit-bar-close {
    background: rgba(60, 50, 88, 0.72);
    border-color: rgba(170, 150, 230, 0.45);
    color: #e7dfff;
}

html[data-appearance="dark"] .twitter-dm-root[data-dm-editing-id] .twitter-dm-composer-input {
    box-shadow: 0 0 0 1px rgba(170, 150, 230, 0.55) inset;
    background: rgba(36, 30, 54, 0.85);
}

/* ============================================================
 * 推特 · Char 个人主页（浮层）
 *
 * 在「消息 Tab」顶部「已关注」头像里点 Char → 打开 Char 推特主页。
 * 浮层挂在 #twitter-page 内，整层覆盖（含顶栏与底栏），
 * 视觉沿用「我」主页的 .twitter-profile-* 样式，并额外提供：
 *   - 顶栏：返回 + 名字 + @handle
 *   - 头像右侧的「私信 / 关注」按钮
 * ============================================================ */
.twitter-char-profile-overlay {
    position: absolute;
    inset: 0;
    z-index: 9;
    display: none;
    flex-direction: column;
    background: #fff;
    overflow: hidden;
}

.twitter-char-profile-overlay.is-open {
    display: flex;
}

/* hydrate 等待期：避免空白闪烁 / 默认渐变色短暂"覆盖"用户上传的图 */
.twitter-char-profile-hydrate-loading {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
}

.twitter-char-profile-hydrate-spinner {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 3px solid rgba(15, 20, 25, 0.12);
    border-top-color: #1d9bf0;
    animation: tcpSpinnerSpin 0.9s linear infinite;
}

@keyframes tcpSpinnerSpin {
    to { transform: rotate(360deg); }
}

html[data-appearance="dark"] .twitter-char-profile-hydrate-loading {
    background: #15202b;
}

html[data-appearance="dark"] .twitter-char-profile-hydrate-spinner {
    border-color: rgba(255, 255, 255, 0.16);
    border-top-color: #1d9bf0;
}

#twitter-page.twitter-page--char-profile-overlay .twitter-bottom-nav,
#twitter-page.twitter-page--char-profile-overlay .twitter-app-header,
#twitter-page.twitter-page--char-profile-overlay #twitter-fab-compose {
    display: none !important;
}

/* banner 包裹层：用来定位浮在 banner 上的返回按钮 + 上传提示 */
.twitter-char-profile-banner-wrap {
    position: relative;
    flex-shrink: 0;
    width: 100%;
}

/* 浮在 banner 左上角的圆形返回按钮（仿推特 / X 的 Char 主页风格） */
.twitter-char-profile-banner-back {
    position: absolute;
    top: 10px;
    left: 12px;
    z-index: 3;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: rgba(15, 20, 25, 0.55);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    transition: background 0.15s ease, transform 0.1s ease;
}

.twitter-char-profile-banner-back:hover {
    background: rgba(15, 20, 25, 0.72);
}

.twitter-char-profile-banner-back:active {
    transform: scale(0.94);
}

/* banner 上的相机图标：默认只露出一半，悬停时整体加深，提示"可点击上传" */
.twitter-char-profile-banner-edit-hint {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(15, 20, 25, 0.45);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.18s ease;
    z-index: 2;
}

.twitter-char-profile-banner-wrap:hover .twitter-char-profile-banner-edit-hint {
    opacity: 0.9;
}

.twitter-char-profile-view {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
    --twitter-profile-avatar: 72px;
}

/* 浮层里的 banner：默认背景由 JS 内联（基于 friend.id 哈希出的渐变色 / 用户上传的图）覆盖；
 * 与「我」的主页一致，banner 自身可点击 → 触发文件上传 */
.twitter-char-profile-banner {
    cursor: pointer;
    transition: filter 0.18s ease;
}

.twitter-char-profile-banner:hover {
    filter: brightness(0.86);
}

.twitter-char-profile-banner:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.7);
    outline-offset: -4px;
}

.twitter-char-profile-avatar-wrap {
    cursor: default;
}

.twitter-char-profile-avatar-wrap:hover {
    opacity: 1;
}

.twitter-char-profile-actions-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.twitter-char-profile-action-btn {
    appearance: none;
    border: 1px solid #cfd9de;
    background: #fff;
    color: #0f1419;
    font-size: 14px;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: 999px;
    cursor: pointer;
    line-height: 1;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.twitter-char-profile-action-btn:hover {
    background: rgba(15, 20, 25, 0.04);
}

.twitter-char-profile-action-btn.is-primary {
    background: #0f1419;
    color: #fff;
    border-color: #0f1419;
}

.twitter-char-profile-action-btn.is-primary:hover {
    background: #2a3340;
    border-color: #2a3340;
}

.twitter-char-profile-action-btn.is-secondary {
    background: #fff;
    color: #0f1419;
}

/* ── 个人简介：可点击编辑 ── */
.twitter-char-profile-bio-block {
    margin: 12px 0 0;
}

.twitter-char-profile-bio-display {
    position: relative;
    display: block;
    padding: 4px 6px 4px 0;
    margin: -4px -6px -4px 0;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.twitter-char-profile-bio-display:hover,
.twitter-char-profile-bio-display:focus-visible {
    background: rgba(15, 20, 25, 0.04);
    outline: none;
}

.twitter-char-profile-bio.twitter-char-profile-bio {
    margin: 0;
    padding-right: 22px;
}

.twitter-char-profile-bio--empty {
    color: #8b98a5;
    font-style: normal;
}

.twitter-char-profile-bio-placeholder {
    font-size: 14px;
    color: #8b98a5;
}

.twitter-char-profile-bio-edit-hint {
    position: absolute;
    top: 6px;
    right: 4px;
    color: #8b98a5;
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
}

.twitter-char-profile-bio-display:hover .twitter-char-profile-bio-edit-hint,
.twitter-char-profile-bio-display:focus-visible .twitter-char-profile-bio-edit-hint {
    opacity: 1;
}

.twitter-char-profile-bio-editor {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
}

.twitter-char-profile-bio-textarea {
    width: 100%;
    box-sizing: border-box;
    min-height: 84px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid #cfd9de;
    background: #fff;
    color: #0f1419;
    font-size: 15px;
    line-height: 1.5;
    resize: vertical;
    outline: none;
    font-family: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.twitter-char-profile-bio-textarea:focus {
    border-color: #1d9bf0;
    box-shadow: 0 0 0 2px rgba(29, 155, 240, 0.18);
}

.twitter-char-profile-bio-editor-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.twitter-char-profile-bio-counter {
    font-size: 12px;
    color: #8b98a5;
}

.twitter-char-profile-bio-editor-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.twitter-char-profile-bio-btn {
    appearance: none;
    border: 1px solid #cfd9de;
    background: #fff;
    color: #0f1419;
    font-size: 13px;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 999px;
    cursor: pointer;
    line-height: 1;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.twitter-char-profile-bio-btn.is-ghost {
    background: transparent;
}

.twitter-char-profile-bio-btn.is-ghost:hover {
    background: rgba(15, 20, 25, 0.06);
}

.twitter-char-profile-bio-btn.is-primary {
    background: #0f1419;
    color: #fff;
    border-color: #0f1419;
}

.twitter-char-profile-bio-btn.is-primary:hover {
    background: #2a3340;
    border-color: #2a3340;
}

.twitter-char-profile-tabs {
    margin-top: 18px;
}

.twitter-char-profile-tab-panels {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.twitter-char-profile-panel {
    padding: 0 0 24px;
}

.twitter-char-profile-panel .twitter-profile-empty {
    margin: 32px 8px;
}

/* 浮层内的推文卡片：用与时间轴一致的 .tweet 视觉，但去掉外间距，保留底部分隔线 */
.twitter-char-profile-tweet-container {
    display: flex;
    flex-direction: column;
}

.twitter-char-profile-tweet-container > .tweet {
    cursor: pointer;
}

/* 暗色主题适配 */
html[data-appearance="dark"] .twitter-char-profile-overlay,
html[data-appearance="dark"] .twitter-char-profile-view {
    background: #15202b;
}

html[data-appearance="dark"] .twitter-char-profile-banner-back {
    background: rgba(0, 0, 0, 0.55);
    color: #f7f9f9;
}

html[data-appearance="dark"] .twitter-char-profile-banner-back:hover {
    background: rgba(0, 0, 0, 0.75);
}

html[data-appearance="dark"] .twitter-char-profile-action-btn {
    background: transparent;
    color: #f7f9f9;
    border-color: rgba(255, 255, 255, 0.25);
}

html[data-appearance="dark"] .twitter-char-profile-action-btn:hover {
    background: rgba(255, 255, 255, 0.06);
}

html[data-appearance="dark"] .twitter-char-profile-action-btn.is-primary {
    background: #f7f9f9;
    color: #0f1419;
    border-color: #f7f9f9;
}

html[data-appearance="dark"] .twitter-char-profile-action-btn.is-primary:hover {
    background: #d7dbdd;
    border-color: #d7dbdd;
}

html[data-appearance="dark"] .twitter-char-profile-bio-display:hover,
html[data-appearance="dark"] .twitter-char-profile-bio-display:focus-visible {
    background: rgba(255, 255, 255, 0.05);
}

html[data-appearance="dark"] .twitter-char-profile-bio-textarea {
    background: rgba(255, 255, 255, 0.04);
    color: #f7f9f9;
    border-color: rgba(255, 255, 255, 0.2);
}

html[data-appearance="dark"] .twitter-char-profile-bio-textarea:focus {
    border-color: #1d9bf0;
    box-shadow: 0 0 0 2px rgba(29, 155, 240, 0.28);
}

html[data-appearance="dark"] .twitter-char-profile-bio-counter,
html[data-appearance="dark"] .twitter-char-profile-bio-placeholder {
    color: #8b98a5;
}

html[data-appearance="dark"] .twitter-char-profile-bio-btn {
    background: transparent;
    color: #f7f9f9;
    border-color: rgba(255, 255, 255, 0.25);
}

html[data-appearance="dark"] .twitter-char-profile-bio-btn.is-ghost:hover {
    background: rgba(255, 255, 255, 0.06);
}

html[data-appearance="dark"] .twitter-char-profile-bio-btn.is-primary {
    background: #f7f9f9;
    color: #0f1419;
    border-color: #f7f9f9;
}

html[data-appearance="dark"] .twitter-char-profile-bio-btn.is-primary:hover {
    background: #d7dbdd;
    border-color: #d7dbdd;
}