/* ============================================================
   styles_2.css —— 原 styles.css 拆分 2/3
   对应原文件约第 599-1441 行（层叠顺序需与 <link> 标签顺序保持一致）
   ============================================================ */




/* ===== 小剧场模式（Theater Mode） ===== */

/* 隐藏进入小剧场之前的消息 */
.theater-hidden {
  display: none !important;
}

/* 整体背景 —— 深灰暗夜 */
#offline-chat-detail.theater-mode.theater-dark {
  background: #111111 !important;
}

/* 消息流区域 */
#offline-chat-detail.theater-mode #offline-msg-flow {
  background: transparent !important;
  padding: 16px 10px !important;
}

/* 顶栏：半透明深灰 */
#offline-chat-detail.theater-mode.theater-dark #chat-top-bar-offline {
  background: rgba(18, 18, 18, 0.96) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}
/* 顶栏文字颜色 */
#offline-chat-detail.theater-mode.theater-dark #chat-top-bar-offline * {
  color: #ffffff !important;
}
/* 小剧场深色模式：顶栏图标强制白色
   修复：主题预设(theme_preset.js)会注入 #chat-top-bar-offline svg { stroke: <深色> !important }，
   直接锁定 svg 的 stroke，使 stroke="currentColor" 失效，图标在深色背景下保持深色不可见。
   此处用更高特异性覆盖，强制 stroke 为白色。 */
#offline-chat-detail.theater-mode.theater-dark #chat-top-bar-offline svg {
  stroke: #ffffff !important;
}
#offline-chat-detail.theater-mode.theater-dark #chat-top-bar-offline button {
  color: #ffffff !important;
}
/* 小剧场深色模式：心声卡片为白底(bg-white/90)，内部文字/图标应保持深色
   修复：上方通配符 * { color:#fff } 把心声卡片内"状态面板"标题等文字也变白，
   白字白底看不清。此处重置卡片及后代为深色。
   注意：svg 的 stroke 重置必须写在顶栏 svg 白色规则之后（同特异性，后写胜）。 */
#offline-chat-detail.theater-mode.theater-dark #offline-inner-voice-card,
#offline-chat-detail.theater-mode.theater-dark #offline-inner-voice-card * {
  color: #1a1a1a !important;
}
#offline-chat-detail.theater-mode.theater-dark #offline-inner-voice-card svg {
  stroke: #4b5563 !important;
}

/* 窗口标签栏 */
#offline-chat-detail.theater-mode.theater-dark #offline-chat-tabs-wrapper {
  background: rgba(18, 18, 18, 0.92) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* ── 隐藏头像，气泡紧贴边缘 ── */
#offline-chat-detail.theater-mode .chat-avatar {
  display: none !important;
}
#offline-chat-detail.theater-mode .chat-item {
  gap: 0 !important;
}

/* 气泡：全宽 */
#offline-chat-detail.theater-mode .chat-bubble {
  max-width: 100% !important;
  width: 100% !important;
  border-radius: 10px !important;
  box-sizing: border-box !important;
  box-shadow: none !important;
}

/* AI 气泡：叙事散文感 */
#offline-chat-detail.theater-mode .chat-ai .chat-bubble {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #f0f0f0 !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  font-size: 14px !important;
  line-height: 1.8 !important;
}

/* 用户气泡：浅灰 */
#offline-chat-detail.theater-mode .chat-user .chat-bubble {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #e8e8e8 !important;
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
}

/* 系统消息 */
#offline-chat-detail.theater-mode.theater-dark .chat-sys-inner {
  background: rgba(255, 255, 255, 0.06) !important;
  color: rgba(255, 255, 255, 0.4) !important;
}

/* 输入栏 */
#offline-chat-detail.theater-mode.theater-dark #offline-input-panel-container {
  background: rgba(18, 18, 18, 0.98) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}
#offline-chat-detail.theater-mode.theater-dark #offline-msg-input {
  background: rgba(255, 255, 255, 0.07) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}
#offline-chat-detail.theater-mode.theater-dark #offline-msg-input::placeholder {
  color: rgba(255, 255, 255, 0.3) !important;
}

/* 颠倒世界模式与小剧场共存时的气泡色覆盖 */
#offline-chat-detail.theater-mode.inverted-world .chat-bubble {
  background-color: #1e1e1e !important;
  color: #f0f0f0 !important;
  border-color: #333333 !important;
}
#offline-chat-detail.theater-mode.inverted-world .chat-user .chat-bubble {
  background-color: #2a2a2a !important;
  color: #e0e0e0 !important;
}

/* ===== 小剧场模式 — 浅色主题（theater-light：白底黑字，与深色相反） ===== */

/* 整体背景 —— 纯白 */
#offline-chat-detail.theater-mode.theater-light {
  background: #ffffff !important;
}

/* 消息流区域 */
#offline-chat-detail.theater-mode.theater-light #offline-msg-flow {
  background: transparent !important;
}

/* 顶栏：半透明白色，深色文字 */
#offline-chat-detail.theater-mode.theater-light #chat-top-bar-offline {
  background: rgba(255, 255, 255, 0.96) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}
#offline-chat-detail.theater-mode.theater-light #chat-top-bar-offline * {
  color: #1a1a1a !important;
}

/* 窗口标签栏 */
#offline-chat-detail.theater-mode.theater-light #offline-chat-tabs-wrapper {
  background: rgba(255, 255, 255, 0.92) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
}

/* AI 气泡：浅灰底、深色字 */
#offline-chat-detail.theater-mode.theater-light .chat-ai .chat-bubble {
  background: rgba(0, 0, 0, 0.03) !important;
  color: #1a1a1a !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

/* 用户气泡：略深浅灰 */
#offline-chat-detail.theater-mode.theater-light .chat-user .chat-bubble {
  background: rgba(0, 0, 0, 0.05) !important;
  color: #2a2a2a !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
}

/* 系统消息 */
#offline-chat-detail.theater-mode.theater-light .chat-sys-inner {
  background: rgba(0, 0, 0, 0.04) !important;
  color: rgba(0, 0, 0, 0.4) !important;
}

/* 输入栏 */
#offline-chat-detail.theater-mode.theater-light #offline-input-panel-container {
  background: rgba(255, 255, 255, 0.98) !important;
  border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
}
#offline-chat-detail.theater-mode.theater-light #offline-msg-input {
  background: rgba(0, 0, 0, 0.04) !important;
  color: #1a1a1a !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
}
#offline-chat-detail.theater-mode.theater-light #offline-msg-input::placeholder {
  color: rgba(0, 0, 0, 0.3) !important;
}

/* 颠倒世界模式与浅色小剧场共存时的气泡色覆盖 */
#offline-chat-detail.theater-mode.theater-light.inverted-world .chat-bubble {
  background-color: #f5f5f5 !important;
  color: #1a1a1a !important;
  border-color: #e0e0e0 !important;
}
#offline-chat-detail.theater-mode.theater-light.inverted-world .chat-user .chat-bubble {
  background-color: #ebebeb !important;
  color: #2a2a2a !important;
}

/* token 文字（浅色主题：深色小字） */
#offline-chat-detail.theater-mode.theater-light #chat-top-bar-offline .topbar-token-info { color: rgba(0,0,0,0.55) !important; }
#offline-chat-detail.theater-mode.theater-light #chat-top-bar-offline .topbar-token-info.streaming { color: #1a1a1a !important; }
/* 顶栏头像背景 */
#offline-chat-detail.theater-mode.theater-light .topbar-avatar-inner { background: rgba(0,0,0,0.04); }

/* 小剧场模式指示徽章 */
#offline-theater-indicator {
  display: none;
  font-size: 11px;
  color: #ffffff;
  background: rgba(80, 80, 80, 0.6);
  border: 1px solid rgba(200, 200, 200, 0.3);
  border-radius: 20px;
  padding: 2px 8px;
  margin-left: 8px;
  flex-shrink: 0;
  white-space: nowrap;
  letter-spacing: 0.02em;
}
#offline-theater-indicator.visible {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}


/* ===== 小剧场存档 — 书本卡片 ===== */

.theater-book-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 4px 0 40px;
}

/* ── 小说封面卡片 · 简约 INS · 黑白灰（精装版）── */
.theater-book-card {
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    min-height: 116px;
    cursor: pointer;
    background: #ffffff;
    border: 1px solid #ececec;
    overflow: hidden;
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    position: relative;
    box-shadow: none;
}

.theater-book-card:active {
    transform: scale(0.96);
    border-color: #1a1a1a;
    box-shadow: 0 4px 16px rgba(0,0,0,0.10);
}

/* 顶部黑色装饰带 — 更细更精致 + 右侧斜切三角 */
.theater-book-band {
    height: 3px;
    background: #1a1a1a;
    flex-shrink: 0;
    position: relative;
}
.theater-book-band::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 3px 6px;
    border-color: transparent transparent #ffffff transparent;
}

.theater-book-spine {
    display: none;
}

.theater-book-content {
    flex: 1;
    padding: 10px 12px 10px 16px;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* 左侧书脊装饰线 — 模拟书脊，增加高级感 */
.theater-book-content::before {
    content: "";
    position: absolute;
    left: 7px;
    top: 10px;
    bottom: 10px;
    width: 1px;
    background: #1a1a1a;
    opacity: 0.45;
}

/* 卡片编号（NO.01）— 衬线字体提升质感 + 虚线渐变占位 */
.theater-book-num {
    font-size: 8.5px;
    font-weight: 400;
    color: #1a1a1a;
    opacity: 0.55;
    letter-spacing: 0.18em;
    margin-bottom: 6px;
    font-family: Georgia, "Times New Roman", serif;
    display: flex;
    align-items: center;
    gap: 6px;
}
.theater-book-num::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(to right, rgba(26,26,26,0.25), transparent);
}

/* 主标题 — 衬线字体 */
.theater-book-title {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.01em;
    color: #111111;
    word-break: break-all;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
    font-family: Georgia, "Songti SC", "STSong", serif;
}

/* 底部信息行 */
.theater-book-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid #ececec;
}

.theater-book-date {
    font-size: 9px;
    color: #b8b8b8;
    letter-spacing: 0.08em;
    font-family: Georgia, "Times New Roman", serif;
    font-variant-numeric: tabular-nums;
}

.theater-book-meta {
    font-size: 9px;
    color: #cccccc;
    letter-spacing: 0.04em;
    font-family: Georgia, "Times New Roman", serif;
}

/* ===== 小剧场·重新选择按钮（仅 theater-mode 显示） ===== */
#theater-reselect-btn { display: none !important; }
#offline-chat-detail.theater-mode #theater-reselect-btn { display: flex !important; }
/* 浅色主题下按钮配色 */
#offline-chat-detail.theater-mode.theater-light #theater-reselect-btn {
    background: #ffffff !important;
    border-color: rgba(0,0,0,0.08) !important;
}

/* 选择小剧场弹窗打开时，隐藏可能残留在底部的“内置 / 自定义”全局导航。
   仅在该弹窗打开期间生效，不影响正常的小组件编辑模式。 */
body.theater-select-open #wm-tab-nav {
    display: none !important;
}

/* ===== 小剧场选择条目 ===== */

/* ===== 小剧场选择条目（支持左滑看详情） ===== */

.theater-select-swipe-wrap {
    position: relative;
    margin-bottom: 8px;
    border-radius: 10px;
    overflow: hidden;
}

.theater-select-item {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: stretch;
    background: #fafafa;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.12s ease;
    border: 1px solid #e0e0e0;
    will-change: transform;
}

.theater-select-item:active {
    background: #f0f0f0;
}

.theater-select-spine {
    display: none;
}

.theater-select-info {
    flex: 1;
    padding: 12px 14px;
}

.theater-select-title {
    font-size: 13px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 4px;
}

.theater-select-preview {
    font-size: 11px;
    color: #aaaaaa;
    line-height: 1.5;
}

/* 小剧场标签 */
.theater-select-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    font-size: 9px;
    font-weight: 500;
    color: #888;
    background: #f0f0f0;
    border-radius: 4px;
    vertical-align: middle;
}

/* 结局走向标签配色 */
.theater-select-ending-he {
    color: #16a34a;
    background: #dcfce7;
}
.theater-select-ending-be {
    color: #dc2626;
    background: #fee2e2;
}
.theater-select-ending-oe {
    color: #2563eb;
    background: #dbeafe;
}

/* 卡片右侧左滑提示（只剩一个小箭头） */
.theater-select-swipe-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    color: #c0c0c0;
    background: transparent;
    border-left: 1px dashed #e0e0e0;
    white-space: nowrap;
    flex-shrink: 0;
    transition: color 0.15s ease;
}
/* 左滑展开时箭头变色提示 */
.theater-select-item[style*="translateX(-"] .theater-select-swipe-hint {
    color: #4a5568;
}


/* ===================================================
   小剧场历史查看器 — 小说内页 · INS 简约风
   =================================================== */

/* 遮罩 */
.th-viewer-backdrop {
    background: rgba(0, 0, 0, 0);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background 0.3s ease;
}
#theater-history-viewer.visible .th-viewer-backdrop {
    background: rgba(0, 0, 0, 0.38);
}

/* 面板整体 */
.th-viewer-panel {
    background: #ffffff;
    border-radius: 28px 28px 0 0;
    max-height: 88vh;
    box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.12);
    transform: translateY(100%);
    transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
    will-change: transform;
}
#theater-history-viewer.visible .th-viewer-panel {
    transform: translateY(0);
}

/* 页眉文字 */
.th-viewer-eyebrow {
    font-size: 9.5px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: #c0c0c0;
    margin-bottom: 4px;
    font-weight: 500;
}
.th-viewer-title {
    font-size: 21px;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.25;
    letter-spacing: -0.01em;
}
.th-viewer-meta {
    font-size: 11px;
    color: #aaaaaa;
    margin-top: 4px;
    letter-spacing: 0.02em;
}

/* 历史回看页右上角：续写 */
.th-viewer-continue-btn {
    height: 32px;
    padding: 0 13px;
    border-radius: 999px;
    border: 1px solid #e5e7eb;
    background: #111827;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    transition: transform 0.15s ease, opacity 0.15s ease, background 0.15s ease;
}
.th-viewer-continue-btn:active {
    transform: scale(0.94);
    background: #000000;
}
.th-viewer-continue-btn.hidden {
    display: none !important;
}

/* 内容滚动区 */
.th-viewer-content {
    flex: 1;
    overflow-y: auto;
    padding: 24px 24px 8px;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* 思维链折叠块 */
.th-thinking {
    background: rgba(0, 0, 0, 0.03);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 14px;
    overflow: hidden;
    cursor: pointer;
    transition: background 0.15s;
}
.th-thinking:active {
    background: rgba(0, 0, 0, 0.06);
}
.th-thinking-hd {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 14px;
    font-size: 10.5px;
    color: #999999;
    letter-spacing: 0.04em;
    user-select: none;
}
.th-thinking-dots {
    display: inline-flex;
    gap: 3px;
    align-items: center;
}
.th-thinking-dots span {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.28);
}
.th-thinking-lbl {
    flex: 1;
}
.th-thinking-chv {
    font-size: 13px;
    color: #bbbbbb;
    transition: transform 0.2s ease;
    display: inline-block;
}
.th-thinking.open .th-thinking-chv {
    transform: rotate(90deg);
}
.th-thinking-bd {
    display: none;
    padding: 4px 14px 12px;
    font-size: 11.5px;
    color: #888888;
    line-height: 1.75;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    max-height: 180px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-break: break-all;
}
.th-thinking.open .th-thinking-bd {
    display: block;
}

/* AI 叙述段落 */
.th-novel-ai {
    font-size: 14.5px;
    line-height: 1.95;
    color: #1a1a1a;
    letter-spacing: 0.008em;
    white-space: pre-wrap;
    word-break: break-word;
}

/* 用户对话（靠右、浅色） */
.th-novel-user {
    font-size: 13px;
    line-height: 1.75;
    color: #999999;
    text-align: right;
    white-space: pre-wrap;
    word-break: break-word;
    padding-right: 14px;
    position: relative;
}
.th-novel-user::after {
    content: '';
    position: absolute;
    right: 0;
    top: 4px;
    bottom: 4px;
    width: 2.5px;
    background: linear-gradient(to bottom, #d0d0d0, #ebebeb);
    border-radius: 2px;
}

/* 分隔装饰 */
.th-novel-div {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    flex-shrink: 0;
}
.th-novel-div-line {
    flex: 1;
    height: 1px;
    background: #ebebeb;
}
.th-novel-div-dot {
    font-size: 8px;
    color: #cccccc;
    line-height: 1;
}

/* 页脚 */
.th-viewer-footer {
    padding: 12px 0 calc(20px + env(safe-area-inset-bottom));
    text-align: center;
    border-top: 1px solid #ebebeb;
    flex-shrink: 0;
}
.th-viewer-end-mark {
    font-size: 10px;
    letter-spacing: 0.22em;
    color: #cccccc;
    text-transform: uppercase;
    font-weight: 400;
}

/* ===================================================
   归档提示 Toast
   =================================================== */
/* ===================================================
   历史编辑模式 — 删除按钮
   =================================================== */

.theater-book-card--edit {
    overflow: visible;
    /* 轻微抖动动画提示可编辑 */
    animation: th-edit-shake 0.35s ease both;
}

@keyframes th-edit-shake {
    0%   { transform: rotate(0deg); }
    25%  { transform: rotate(-0.8deg); }
    75%  { transform: rotate(0.8deg); }
    100% { transform: rotate(0deg); }
}

.theater-history-delete-btn {
    position: absolute;
    top: -7px;
    right: -7px;
    width: 20px;
    height: 20px;
    background: #1a1a1a;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #ffffff;
    z-index: 10;
    flex-shrink: 0;
    cursor: pointer;
    transition: transform 0.12s ease;
}

.theater-history-delete-btn:active {
    transform: scale(0.85);
}

/* ===================================================
   历史标题编辑 — 黑白灰专用弹窗
   =================================================== */

.theater-history-rename-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.52);
    opacity: 0;
    transition: opacity 0.16s ease;
}
.theater-history-rename-modal.visible { opacity: 1; }
.theater-history-rename-card {
    width: min(360px, 100%);
    background: #ffffff;
    border: 1px solid #d4d4d4;
    border-radius: 20px;
    box-shadow: 0 24px 64px rgba(0,0,0,0.24);
    padding: 22px 20px 18px;
    transform: translateY(8px) scale(0.98);
    transition: transform 0.16s ease;
}
.theater-history-rename-modal.visible .theater-history-rename-card { transform: translateY(0) scale(1); }
.theater-history-rename-eyebrow {
    font-size: 9px;
    letter-spacing: 0.22em;
    color: #a3a3a3;
    text-align: center;
    margin-bottom: 5px;
    font-weight: 700;
}
.theater-history-rename-title {
    font-size: 17px;
    font-weight: 750;
    color: #171717;
    text-align: center;
    margin-bottom: 18px;
}
.theater-history-rename-input {
    width: 100%;
    border: 1px solid #d4d4d4;
    background: #f5f5f5;
    color: #171717;
    border-radius: 13px;
    padding: 12px 13px;
    font-size: 14px;
    outline: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.theater-history-rename-input:focus {
    border-color: #525252;
    background: #ffffff;
}
.theater-history-rename-input::placeholder { color: #a3a3a3; }
.theater-history-rename-actions {
    display: flex;
    gap: 9px;
    margin-top: 18px;
}
.theater-history-rename-actions button {
    flex: 1;
    height: 42px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 700;
    border: 1px solid #d4d4d4;
}
.theater-history-rename-cancel {
    background: #f5f5f5;
    color: #737373;
}
.theater-history-rename-ok {
    background: #171717;
    color: #ffffff;
    border-color: #171717 !important;
}
.theater-history-rename-actions button:active { transform: scale(0.97); }

/* ===================================================
   小剧场历史搜索
   =================================================== */

.theater-history-search-modal {
    background: rgba(0,0,0,0);
    display: flex;
    align-items: flex-end;
    transition: background 0.18s ease;
}
.theater-history-search-modal.hidden { display: none !important; }
.theater-history-search-modal.visible { background: rgba(0,0,0,0.42); }
.theater-history-search-panel {
    width: 100%;
    max-height: 82vh;
    background: #ffffff;
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -10px 38px rgba(0,0,0,0.14);
    transform: translateY(100%);
    transition: transform 0.22s cubic-bezier(0.32,0.72,0,1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.theater-history-search-modal.visible .theater-history-search-panel { transform: translateY(0); }
.theater-history-search-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 14px 12px;
    border-bottom: 1px solid #eeeeee;
    flex-shrink: 0;
}
.theater-history-search-field {
    flex: 1;
    min-width: 0;
    height: 40px;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f5f5f5;
    border: 1px solid #e5e5e5;
    border-radius: 13px;
    padding: 0 12px;
}
.theater-history-search-field svg {
    width: 17px;
    height: 17px;
    color: #8a8a8a;
    flex-shrink: 0;
}
.theater-history-search-field input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: none;
    background: transparent;
    color: #171717;
    font-size: 13px;
    line-height: 1;
}
.theater-history-search-field input::placeholder { color: #a3a3a3; }
.theater-history-search-close {
    border: 0;
    background: transparent;
    color: #525252;
    font-size: 13px;
    font-weight: 650;
    padding: 8px 2px;
    flex-shrink: 0;
}
.theater-history-search-results {
    flex: 1;
    overflow-y: auto;
    padding: 10px 14px 18px;
    -webkit-overflow-scrolling: touch;
}
.theater-history-search-empty {
    color: #b0b0b0;
    text-align: center;
    font-size: 12px;
    padding: 54px 12px;
}
.theater-history-search-result {
    width: 100%;
    display: block;
    text-align: left;
    background: #ffffff;
    border: 0;
    border-bottom: 1px solid #ededed;
    padding: 13px 4px 14px;
}
.theater-history-search-result:active { background: #f7f7f7; }
.theater-history-search-result-top {
    display: flex;
    align-items: center;
    gap: 10px;
}
.theater-history-search-result-title {
    flex: 1;
    min-width: 0;
    font-size: 13px;
    font-weight: 750;
    color: #202020;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.theater-history-search-result-date {
    flex-shrink: 0;
    font-size: 9.5px;
    color: #b0b0b0;
    letter-spacing: 0.04em;
}
.theater-history-search-result-meta {
    margin-top: 4px;
    font-size: 9.5px;
    color: #8f8f8f;
    font-weight: 650;
}
.theater-history-search-result-snippet {
    margin-top: 5px;
    font-size: 11.5px;
    line-height: 1.65;
    color: #777777;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}
.th-search-hit {
    border-radius: 10px;
    outline: 2px solid #222222;
    outline-offset: 6px;
    background: #f4f4f4;
    transition: outline-color 0.25s ease, background 0.25s ease;
}

/* ===================================================
   小剧场命名弹窗 — 底部滑入动画
   =================================================== */

.theater-naming-sheet {
    transform: translateY(100%);
    transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1);
    will-change: transform;
}

.theater-naming-sheet.visible {
    transform: translateY(0);
}

#theater-naming-modal {
    transition: background 0.3s ease;
}

.theater-archive-toast {
    position: fixed;
    bottom: 88px;
    left: 50%;
    transform: translateX(-50%) translateY(12px);
    background: rgba(20, 20, 20, 0.9);
    color: #ffffff;
    font-size: 12.5px;
    padding: 9px 18px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    z-index: 9999;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    white-space: nowrap;
    pointer-events: none;
    letter-spacing: 0.02em;
}
.theater-archive-toast.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}


@keyframes slideUpModal {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}


/* ── App 内滚动区域优化 ── */
.sub-app-screen > div:last-child,
.sub-app-screen [class*="overflow-y-auto"],
.sub-app-screen [class*="overflow-auto"] {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
#msg-flow, #offline-msg-flow {
    contain: layout style;
    transform: translateZ(0);
}


/* ==========================================================
   性能优化：毛玻璃 / backdrop-filter / 重绘隔离
   ========================================================== */

/* 重绘隔离：防止局部变化引起全页面重绘 */

/* 聊天气泡行：layout 隔离，防止链式重排 */
#msg-flow > div,
#offline-msg-flow > div {
  contain: layout paint;
}

/* 毛玻璃元素：统一加重绘隔离（配合 overflow:hidden 裁剪采样范围） */
/* 注意：#chat-top-bar-online/offline 不加 contain:paint，否则心声弹窗（absolute 子元素超出顶栏范围）会被裁剪不可见 */
/* 注意：#dock-container 移除 isolation:isolate，避免 stacking context 隔离导致透明玻璃感丢失 */
#dock-container {
  contain: paint;
}
#online-chat-tabs-wrapper,
.th-viewer-backdrop {
  contain: paint;
  isolation: isolate;
}
#chat-top-bar-online,
#chat-top-bar-offline {
  isolation: isolate;
}

/* 滚动时临时降级模糊，释放 GPU */
#chat-top-bar-online.is-scrolling,
#chat-top-bar-offline.is-scrolling {
  backdrop-filter: blur(4px) saturate(1.1) !important;
  -webkit-backdrop-filter: blur(4px) saturate(1.1) !important;
  transition: none !important;
}

/* 流式输出期间完全关闭顶栏 backdrop-filter，最大程度释放 GPU */
.is-streaming #chat-top-bar-online,
.is-streaming #chat-top-bar-offline,
.is-streaming #online-chat-tabs-wrapper,
.is-streaming #offline-chat-tabs-wrapper {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* cloud-bg 20px → 12px，降低采样开销 */

/* ===== API设置 · 生图预设标签卡片（档案卡风格 / ins简约） ===== */

/* 预设卡片列表容器 */
.igp-card-list {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

/* 单张预设档案卡 */
.igp-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
  background: #fff;
  border: 1px solid #f0f0f0;
  border-radius: 16px;
  padding: 14px 15px 14px 18px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.035);
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.14s ease, box-shadow 0.14s ease, border-color 0.14s ease;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.igp-card:active {
  transform: scale(0.985);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

/* 左侧色条（书脊式档案卡标识） */
.igp-card-spine {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: #e4e4e4;
  flex-shrink: 0;
}

/* 内容区 */
.igp-card-body {
  flex: 1;
  min-width: 0;
}
.igp-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
}
.igp-card-name {
  font-size: 14.5px;
  font-weight: 600;
  color: #1a1a1a;
  letter-spacing: 0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  min-width: 0;
}
/* “使用中” 徽标 */
.igp-card-badge {
  flex-shrink: 0;
  font-size: 9.5px;
  letter-spacing: 0.06em;
  color: #8fa3b8;
  border: 1px solid #dfe6ee;
  background: var(--mo-blue-light);
  padding: 2px 8px;
  border-radius: 20px;
  white-space: nowrap;
  font-weight: 600;
}

/* 参数标签条 */
.igp-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.igp-tag {
  font-size: 10.5px;
  color: #8a8a8a;
  background: #f6f6f6;
  border-radius: 6px;
  padding: 2.5px 8px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  line-height: 1.5;
}
.igp-tag--muted { color: #b8b8b8; }

/* 右侧箭头 */
.igp-card-arrow {
  flex-shrink: 0;
  color: #d2d2d2;
  transition: transform 0.14s ease;
}
.igp-card:active .igp-card-arrow { transform: translateX(2px); }

/* 激活态：色条变蓝 + 极浅蓝底 */
.igp-card--active {
  border-color: #e3eaf2;
  background: linear-gradient(180deg, #fafcff 0%, #ffffff 100%);
}
.igp-card--active .igp-card-spine { background: var(--mo-blue); }

/* 新建预设卡（虚线占位） */
.igp-card-add {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 52px;
  border: 1px dashed #d8d8d8;
  border-radius: 16px;
  color: #9a9a9a;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  background: #fcfcfc;
  cursor: pointer;
  transition: border-color 0.14s ease, color 0.14s ease, background 0.14s ease;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}
.igp-card-add:active { transform: scale(0.985); }
.igp-card-add:hover { border-color: var(--mo-blue); color: var(--mo-blue-dark); }

/* ===== 生图预设编辑弹窗（ins简约） ===== */
.igp-modal {
  position: fixed;
  inset: 0;
  background: rgba(20, 20, 24, 0.42);
  z-index: 9999;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  opacity: 0;
  transition: opacity 0.22s ease;
  -webkit-tap-highlight-color: transparent;
}
.igp-modal.igp-modal--show { opacity: 1; }
.igp-modal-card {
  width: 100%;
  max-width: 460px;
  max-height: 90vh;
  background: #fff;
  border-radius: 22px 22px 0 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(100%);
  transition: transform 0.26s cubic-bezier(0.32, 0.72, 0, 1);
  box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.18);
}
.igp-modal.igp-modal--show .igp-modal-card { transform: translateY(0); }
@media (min-width: 480px) {
  .igp-modal { align-items: center; padding: 16px; }
  .igp-modal-card { border-radius: 22px; max-height: 86vh; }
}
/* ========================================================================== */
/* 查手机 / Device Inspector — Dashboard structure × Editorial visual system  */
/* ========================================================================== */
#app-phone,
#phone-sub-app,
#phone-app-detail,
#phone-prompts-app,
#phone-prompt-edit-modal,
#phone-new-app-modal {
  --pi-bg: #f2f2f2;
  --pi-paper: #ffffff;
  --pi-ink: #171717;
  --pi-muted: rgba(28, 28, 28, .58);
  --pi-faint: rgba(28, 28, 28, .38);
  --pi-line: rgba(28, 28, 28, .13);
  --pi-line-strong: rgba(28, 28, 28, .42);
  --pi-serif: Georgia, "Times New Roman", "Noto Serif SC", serif;
  --pi-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  background: var(--pi-bg);
  color: var(--pi-ink);
  font-family: var(--pi-sans);
}

.phone-inspector-shell,
.phone-layer-screen {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--pi-bg);
  color: var(--pi-ink);
}

.phone-inspector-topbar,
.phone-layer-topbar {
  min-height: 68px;
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 9px;
  background: rgba(248, 248, 248, .94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--pi-line);
}

.phone-topbar-copy { min-width: 0; }
.phone-kicker {
  font-size: 9px;
  line-height: 1.2;
  letter-spacing: .19em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--pi-faint);
}
.phone-topbar-title,
.phone-section-title,
.phone-device-name,
.phone-refresh-title {
  font-family: var(--pi-serif);
  font-weight: 400;
  letter-spacing: -.025em;
  color: var(--pi-ink);
}
.phone-topbar-title {
  margin-top: 2px;
  font-size: 20px;
  line-height: 1.08;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.phone-topbar-spacer { width: 40px; height: 40px; }

.phone-icon-button,
.phone-action-button,
.phone-text-button,
.phone-secondary-button {
  -webkit-tap-highlight-color: transparent;
  appearance: none;
  border: 1px solid var(--pi-line);
  background: transparent;
  color: var(--pi-ink);
  font-family: var(--pi-sans);
  transition: background .16s ease, border-color .16s ease, color .16s ease, opacity .16s ease, transform .12s ease;
}
.phone-icon-button {
  width: 38px;
  height: 38px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.phone-icon-button:hover,
.phone-action-button:hover,
.phone-text-button:hover,
.phone-secondary-button:hover { border-color: var(--pi-line-strong); background: rgba(28, 28, 28, .035); }
.phone-icon-button:active,
.phone-action-button:active,
.phone-text-button:active,
.phone-secondary-button:active { transform: scale(.97); }
.phone-icon-button:focus-visible,
.phone-action-button:focus-visible,
.phone-text-button:focus-visible,
.phone-secondary-button:focus-visible,
.phone-editor-input:focus-visible,
.phone-editor-textarea:focus-visible,
.phone-contact-search input:focus-visible {
  outline: 2px solid rgba(28, 28, 28, .35);
  outline-offset: 2px;
}
.phone-action-button {
  min-height: 38px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  letter-spacing: .06em;
}
.phone-text-button {
  min-height: 36px;
  padding: 0 12px;
  font-size: 12px;
  letter-spacing: .05em;
}
.phone-secondary-button {
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  font-size: 12px;
  letter-spacing: .05em;
}
.phone-top-actions { display: flex; gap: 5px; align-items: center; }
.phone-top-actions.hidden { display: none; }

.phone-contact-select {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  background: var(--pi-bg);
}
.phone-contact-intro {
  padding: 28px 18px 22px;
  border-bottom: 1px solid var(--pi-line);
}
.phone-contact-intro h1 {
  margin: 7px 0 8px;
  max-width: 310px;
  font-family: var(--pi-serif);
  font-weight: 400;
  font-size: clamp(31px, 9vw, 48px);
  line-height: .96;
  letter-spacing: -.045em;
}
.phone-contact-intro p {
  margin: 0;
  max-width: 34em;
  color: var(--pi-muted);
  font-size: 12px;
  line-height: 1.65;
}
.phone-contact-search {
  margin-top: 20px;
  display: grid;
  grid-template-columns: 22px 1fr;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--pi-line-strong);
  padding: 8px 0 9px;
  color: var(--pi-faint);
}
.phone-contact-search input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--pi-ink);
  font: 400 13px/1.4 var(--pi-sans);
}
.phone-contact-search input::placeholder { color: var(--pi-faint); }
.phone-device-list { padding: 0 18px 28px; }
.phone-list-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 17px 0 10px;
  border-bottom: 1px solid var(--pi-line);
}
.phone-list-heading span:last-child { color: var(--pi-faint); font-size: 10px; }
.phone-device-row {
  width: 100%;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  gap: 13px;
  align-items: center;
  padding: 15px 0;
  border: 0;
  border-bottom: 1px solid var(--pi-line);
  background: transparent;
  color: var(--pi-ink);
  text-align: left;
  cursor: pointer;
  transition: opacity .16s ease, background .16s ease;
}
.phone-device-row:hover { background: rgba(28, 28, 28, .025); }
.phone-device-row:active { opacity: .62; }
.phone-device-avatar {
  width: 54px;
  height: 64px;
  overflow: hidden;
  background: #e7e7e7;
  border: 1px solid rgba(0,0,0,.08);
  display: flex;
  align-items: center;
  justify-content: center;
}
.phone-device-avatar img { width: 100%; height: 100%; object-fit: cover; }
.phone-device-row-title {
  font-family: var(--pi-serif);
  font-size: 19px;
  line-height: 1.08;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.phone-device-row-meta {
  display: flex;
  gap: 10px;
  margin-top: 6px;
  color: var(--pi-faint);
  font-size: 10px;
  letter-spacing: .04em;
}
.phone-device-row-state {
  min-width: 52px;
  text-align: right;
  color: var(--pi-muted);
  font: 600 10px/1.35 var(--pi-sans);
}
.phone-empty-state {
  padding: 42px 10px;
  text-align: center;
  color: var(--pi-faint);
  font-size: 12px;
  line-height: 1.7;
}

.phone-device-workspace {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  background: var(--pi-bg);
}
.phone-device-workspace.hidden { display: none; }
.phone-device-dossier {
  display: grid;
  grid-template-columns: minmax(105px, 34%) 1fr;
  min-height: 190px;
  border-bottom: 1px solid var(--pi-line);
}
.phone-device-portrait {
  min-height: 190px;
  background-color: #dedede;
  background-size: cover;
  background-position: center 20%;
  filter: none;
  border-right: 1px solid var(--pi-line);
}
.phone-device-copy {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 22px 18px;
}
.phone-device-name {
  margin: 6px 0 9px;
  font-size: clamp(31px, 9vw, 47px);
  line-height: .95;
}
.phone-device-meta {
  margin: 0;
  color: var(--pi-muted);
  font-size: 11px;
  line-height: 1.6;
}
.phone-workspace-heading {
  padding: 19px 18px 12px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 14px;
}
.phone-section-title { margin-top: 3px; font-size: 24px; line-height: 1; }
.phone-summary-text { color: var(--pi-faint); font-size: 10px; white-space: nowrap; }
.phone-app-index {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--pi-line);
  margin: 0 18px 28px;
}
.phone-app-card {
  min-width: 0;
  min-height: 132px;
  padding: 13px 12px 12px;
  border: 0;
  border-right: 1px solid var(--pi-line);
  border-bottom: 1px solid var(--pi-line);
  background: transparent;
  color: var(--pi-ink);
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  transition: background .16s ease, opacity .16s ease;
}
.phone-app-card:nth-child(2n) { border-right: 0; }
.phone-app-card:hover { background: rgba(28, 28, 28, .035); }
.phone-app-card:active { opacity: .62; }
.phone-app-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
}
.phone-app-number { color: var(--pi-faint); font: 500 9px/1 var(--pi-sans); letter-spacing: .14em; }
.phone-app-icon {
  width: 34px;
  height: 34px;
  border: 1px solid var(--pi-line-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--pi-ink);
  overflow: hidden;
}
.phone-app-icon svg { width: 18px; height: 18px; }
.phone-app-icon img { width: 100% !important; height: 100% !important; border-radius: 0 !important; object-fit: cover; }
.phone-app-card-name {
  margin-top: auto;
  padding-top: 20px;
  font-family: var(--pi-serif);
  font-size: 18px;
  line-height: 1.05;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.phone-app-card-meta {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
  color: var(--pi-faint);
  font-size: 9px;
  line-height: 1.35;
}
.phone-app-status-dot {
  width: 5px;
  height: 5px;
  margin-top: 3px;
  flex: 0 0 auto;
  background: var(--pi-ink);
}
.phone-app-status-dot.is-empty { background: transparent; border: 1px solid var(--pi-line-strong); }
.phone-app-status { display: inline-flex; align-items: flex-start; gap: 5px; }

.phone-layer-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  background: var(--pi-bg);
  color: var(--pi-ink);
}
.phone-content-page { padding: 0 18px 34px; }
.phone-content-hero {
  padding: 23px 0 17px;
  border-bottom: 1px solid var(--pi-line);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: flex-end;
}
.phone-content-hero h2 {
  margin: 5px 0 0;
  font: 400 30px/.98 var(--pi-serif);
  letter-spacing: -.035em;
}
.phone-content-count { color: var(--pi-faint); font-size: 10px; white-space: nowrap; }
.phone-record-list { border-top: 1px solid var(--pi-line); }
.phone-record-row {
  width: 100%;
  padding: 14px 0;
  border: 0;
  border-bottom: 1px solid var(--pi-line);
  background: transparent;
  color: var(--pi-ink);
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  text-align: left;
  cursor: pointer;
  transition: background .15s ease, opacity .15s ease;
}
.phone-record-row:hover { background: rgba(28,28,28,.025); }
.phone-record-row:active { opacity: .62; }
.phone-record-icon {
  width: 38px;
  height: 38px;
  border: 1px solid var(--pi-line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--pi-muted);
  overflow: hidden;
}
.phone-record-icon svg { width: 18px; height: 18px; }
.phone-record-icon img { width:100% !important; height:100% !important; border-radius:0 !important; object-fit:cover; }
.phone-record-title {
  font: 400 17px/1.15 var(--pi-serif);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.phone-record-preview {
  margin-top: 4px;
  color: var(--pi-muted);
  font-size: 11px;
  line-height: 1.45;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.phone-record-meta { color: var(--pi-faint); font-size: 9px; text-align: right; white-space: nowrap; }
.phone-record-badge {
  display: inline-block;
  margin-top: 4px;
  border: 1px solid var(--pi-line-strong);
  padding: 2px 4px;
  min-width: 18px;
  text-align: center;
  color: var(--pi-ink);
  font-size: 9px;
}
.phone-section-block { padding-top: 20px; }
.phone-section-label {
  padding-bottom: 8px;
  border-bottom: 1px solid var(--pi-line-strong);
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
}
.phone-section-label h3 { margin: 0; font: 400 22px/1 var(--pi-serif); }
.phone-section-label span { color: var(--pi-faint); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; }
.phone-ranking-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-bottom: 1px solid var(--pi-line);
}
.phone-ranking-card {
  min-width: 0;
  min-height: 148px;
  padding: 13px 9px;
  border-right: 1px solid var(--pi-line);
  cursor: pointer;
}
.phone-ranking-card:last-child { border-right: 0; }
.phone-ranking-number { font: italic 400 25px/1 var(--pi-serif); color: var(--pi-faint); }
.phone-ranking-title { margin-top: 26px; font: 400 15px/1.08 var(--pi-serif); display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden; }
.phone-ranking-author { margin-top: 7px; color: var(--pi-faint); font-size: 9px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.phone-kpi-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--pi-line);
  border-left: 1px solid var(--pi-line);
}
.phone-kpi {
  min-height: 92px;
  padding: 12px 10px;
  border-right: 1px solid var(--pi-line);
  border-bottom: 1px solid var(--pi-line);
}
.phone-kpi-label { color: var(--pi-faint); font-size: 9px; line-height: 1.3; letter-spacing:.04em; }
.phone-kpi-value { margin-top: 12px; font: 400 17px/1.1 var(--pi-serif); word-break: break-all; }
.phone-video-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1px; background: var(--pi-line); }
.phone-video-card {
  position: relative;
  aspect-ratio: 4 / 5;
  padding: 16px 12px;
  border: 0;
  background: #1c1c1c;
  color: #f9f8f6;
  text-align: left;
  overflow: hidden;
  cursor: pointer;
}
.phone-video-card .phone-video-index { font: italic 400 28px/1 var(--pi-serif); color: rgba(249,248,246,.38); }
.phone-video-card .phone-video-desc { position:absolute;left:12px;right:12px;bottom:34px;font-size:11px;line-height:1.55;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden; }
.phone-video-card .phone-video-author { position:absolute;left:12px;right:12px;bottom:12px;font-size:9px;letter-spacing:.07em;color:rgba(249,248,246,.66); }
.phone-empty-panel { padding: 48px 18px; text-align:center; color:var(--pi-faint); font-size:12px; line-height:1.7; }
.phone-loading-panel { min-height: 55vh; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:12px; color:var(--pi-muted); }
.phone-loading-rule { width: 74px; height: 1px; background: var(--pi-ink); transform-origin:left center; animation: phone-loading-scan 1.2s ease-in-out infinite; }
@keyframes phone-loading-scan { 0%,100%{transform:scaleX(.2);opacity:.35} 50%{transform:scaleX(1);opacity:1} }
.phone-error-panel { margin: 24px 18px; padding: 16px 0; border-top:1px solid var(--pi-line-strong); border-bottom:1px solid var(--pi-line); color:var(--pi-muted); font-size:12px; line-height:1.6; }

.phone-thread { padding: 20px 18px 36px; }
.phone-thread-note { padding: 0 0 15px; margin-bottom: 18px; border-bottom: 1px solid var(--pi-line); color: var(--pi-faint); font-size: 9px; letter-spacing: .08em; text-align:center; text-transform: uppercase; }
.phone-message-row { display:flex; align-items:flex-end; gap:8px; margin: 0 0 16px; }
.phone-message-row.is-self { justify-content:flex-end; }
.phone-message-avatar { width:30px;height:34px;border:1px solid var(--pi-line);display:flex;align-items:center;justify-content:center;color:var(--pi-faint);font-size:9px;flex:0 0 auto;overflow:hidden; }
.phone-message-avatar svg { width:16px;height:16px; }
.phone-message-bubble { max-width:78%; padding:10px 11px; border:1px solid var(--pi-line); background:var(--pi-paper); color:var(--pi-ink); font-size:13px; line-height:1.55; white-space:pre-wrap; word-break:break-word; }
.phone-message-row.is-self .phone-message-bubble { background:var(--pi-ink);border-color:var(--pi-ink);color:var(--pi-bg); }
.phone-reading-page { padding: 26px 22px 52px; max-width: 680px; margin:0 auto; }
.phone-reading-chapter { padding-bottom:16px;border-bottom:1px solid var(--pi-line-strong);font:400 30px/1.06 var(--pi-serif);letter-spacing:-.03em; }
.phone-reading-body { margin-top:22px;font:400 15px/1.95 var(--pi-serif);color:rgba(28,28,28,.86);text-align:justify; }
.phone-reading-body strong { font-style:italic; font-weight:600; }
.phone-detail-sheet { padding: 22px 18px 40px; }
.phone-detail-hero { border-bottom:1px solid var(--pi-line-strong); padding-bottom:18px; margin-bottom:20px; }
.phone-detail-hero h2 { margin:6px 0 5px;font:400 31px/1 var(--pi-serif);letter-spacing:-.035em; }
.phone-detail-hero p { margin:0;color:var(--pi-muted);font-size:11px;line-height:1.6; }
.phone-comment-list { border-top:1px solid var(--pi-line); }
.phone-comment { display:grid;grid-template-columns:36px 1fr;gap:11px;padding:14px 0;border-bottom:1px solid var(--pi-line); }
.phone-comment-avatar { width:36px;height:36px;border:1px solid var(--pi-line);display:flex;align-items:center;justify-content:center;color:var(--pi-faint); }
.phone-comment-name { color:var(--pi-faint);font-size:9px;letter-spacing:.05em;text-transform:uppercase; }
.phone-comment-text { margin-top:4px;font-size:12px;line-height:1.65;white-space:pre-wrap; }
.phone-media-frame { min-height: 310px; background:#1c1c1c;color:#f9f8f6;padding:22px 18px;display:flex;flex-direction:column;justify-content:flex-end; }
.phone-media-index { font:italic 400 44px/1 var(--pi-serif);color:rgba(249,248,246,.25);margin-bottom:auto; }
.phone-media-copy { font-size:13px;line-height:1.7;white-space:pre-wrap; }
.phone-media-author { margin-top:16px;font-size:10px;letter-spacing:.09em;color:rgba(249,248,246,.58);text-transform:uppercase; }

.phone-settings-intro { padding: 22px 18px 16px; border-bottom:1px solid var(--pi-line); }
.phone-settings-intro p { margin:8px 0 0;color:var(--pi-muted);font-size:11px;line-height:1.65; }
.phone-settings-intro code { font-family: ui-monospace,SFMono-Regular,Menlo,monospace; color:var(--pi-ink); }
.phone-config-list { flex:1 1 auto;min-height:0;overflow-y:auto;padding:0 18px 28px; }
.phone-config-row { width:100%;display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:12px;align-items:start;padding:15px 0;border:0;border-bottom:1px solid var(--pi-line);background:transparent;color:var(--pi-ink);text-align:left;cursor:pointer; }
.phone-config-row:hover { background:rgba(28,28,28,.025); }
.phone-config-title { font:400 17px/1.1 var(--pi-serif); }
.phone-config-preview { margin-top:5px;color:var(--pi-muted);font-size:10px;line-height:1.55;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word; }
.phone-config-actions { display:flex;align-items:center;gap:6px;color:var(--pi-faint); }
.phone-config-delete { border:0;background:transparent;color:var(--pi-faint);padding:4px 3px;font-size:9px;cursor:pointer;letter-spacing:.05em; }
.phone-config-delete:hover { color:var(--pi-ink);text-decoration:underline;text-underline-offset:3px; }

.phone-editor-screen {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 620;
  flex-direction: column;
  background: var(--pi-bg);
  transform: translateY(26px);
  opacity: 0;
  transition: transform .18s cubic-bezier(.25,.8,.25,1), opacity .18s ease;
}
#phone-new-app-modal { z-index: 630; }
.phone-editor-body { flex:1 1 auto;min-height:0;overflow-y:auto;padding:22px 18px 34px;display:flex;flex-direction:column;gap:22px; }
.phone-field-group { display:flex;flex-direction:column;gap:9px; }
.phone-field-label { display:block;color:var(--pi-faint);font-size:9px;line-height:1.3;font-weight:600;letter-spacing:.17em;text-transform:uppercase; }
.phone-editor-input,
.phone-editor-textarea { width:100%;box-sizing:border-box;border:1px solid var(--pi-line);background:var(--pi-paper);color:var(--pi-ink);font-family:var(--pi-sans);font-size:13px;outline:0;transition:border-color .16s ease,background .16s ease; }
.phone-editor-input { height:46px;padding:0 12px; }
.phone-editor-textarea { flex:1 1 auto;min-height:330px;padding:14px 12px;resize:none;line-height:1.72; }
.phone-editor-input:focus,
.phone-editor-textarea:focus { border-color:var(--pi-line-strong);background:#fff; }
.phone-editor-input::placeholder,
.phone-editor-textarea::placeholder { color:var(--pi-faint); }
.phone-field-note { margin:0;padding-top:14px;border-top:1px solid var(--pi-line);color:var(--pi-faint);font-size:10px;line-height:1.7; }
.phone-icon-picker { display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1px solid var(--pi-line);border-left:1px solid var(--pi-line); }
.phone-icon-choice { aspect-ratio:1;border:0;border-right:1px solid var(--pi-line);border-bottom:1px solid var(--pi-line);background:transparent;color:var(--pi-muted);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .15s ease,color .15s ease;overflow:hidden; }
.phone-icon-choice:hover { background:rgba(28,28,28,.035); }
.phone-icon-choice.is-selected { background:var(--pi-ink);color:var(--pi-bg); }
.phone-icon-choice svg { width:20px;height:20px; }
.phone-icon-choice img { width:100% !important;height:100% !important;object-fit:cover;border-radius:0 !important; }

.phone-refresh-overlay { display:flex;align-items:center;justify-content:center;background:rgba(28,28,28,.52);padding:22px; }
.phone-refresh-overlay.hidden { display:none; }
.phone-refresh-panel { width:min(320px,100%);background:var(--pi-bg);border:1px solid rgba(255,255,255,.35);padding:24px 22px; }
.phone-refresh-title { margin-top:6px;font-size:27px;line-height:1; }
.phone-refresh-copy { margin-top:18px;color:var(--pi-muted);font-size:11px;line-height:1.5; }
.phone-progress-track { margin-top:16px;height:2px;background:var(--pi-line);overflow:hidden; }
.phone-progress-bar { width:0;height:100%;background:var(--pi-ink);transition:width .28s ease; }

@media (min-width: 560px) {
  .phone-contact-intro { padding: 34px 28px 24px; }
  .phone-device-list { padding-left:28px;padding-right:28px; }
  .phone-app-index { grid-template-columns:repeat(3,minmax(0,1fr)); margin-left:28px;margin-right:28px; }
  .phone-app-card:nth-child(2n) { border-right:1px solid var(--pi-line); }
  .phone-app-card:nth-child(3n) { border-right:0; }
  .phone-workspace-heading { padding-left:28px;padding-right:28px; }
  .phone-content-page,.phone-thread,.phone-detail-sheet,.phone-config-list { padding-left:28px;padding-right:28px; }
  .phone-settings-intro,.phone-editor-body { padding-left:28px;padding-right:28px; }
}

@media (prefers-reduced-motion: reduce) {
  .phone-icon-button,
  .phone-action-button,
  .phone-text-button,
  .phone-secondary-button,
  .phone-device-row,
  .phone-app-card,
  .phone-record-row,
  .phone-editor-screen,
  .phone-progress-bar { transition:none !important; }
  .phone-loading-rule { animation:none !important; transform:none !important; }
}
.phone-layer-screen.hidden,
.phone-contact-select.hidden { display: none !important; }

/* Desktop viewport: turn the same module into a real workstation layout. */
@media (min-width: 820px) {
  .phone-contact-select {
    display: grid;
    grid-template-columns: minmax(300px, .9fr) minmax(420px, 1.25fr);
    overflow: hidden;
  }
  .phone-contact-select.hidden { display: none !important; }
  .phone-contact-intro {
    height: 100%;
    overflow-y: auto;
    padding: 46px 42px;
    border-bottom: 0;
    border-right: 1px solid var(--pi-line);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .phone-contact-intro h1 { max-width: 460px; font-size: clamp(54px, 6.5vw, 88px); }
  .phone-contact-intro p { max-width: 40em; font-size: 13px; }
  .phone-contact-search { width: min(420px, 100%); }
  .phone-device-list { min-height: 0; overflow-y: auto; padding: 28px 40px 44px; }

  .phone-device-workspace:not(.hidden) {
    display: grid;
    grid-template-columns: minmax(280px, 33%) minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
  }
  .phone-device-dossier {
    grid-column: 1;
    grid-row: 1 / span 2;
    min-height: 0;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: minmax(250px, 48%) 1fr;
    border-bottom: 0;
    border-right: 1px solid var(--pi-line);
  }
  .phone-device-portrait { min-height: 0; border-right: 0; border-bottom: 1px solid var(--pi-line); }
  .phone-device-copy { justify-content: flex-start; padding: 32px; }
  .phone-device-name { font-size: clamp(48px, 5vw, 72px); }
  .phone-workspace-heading { grid-column: 2; grid-row: 1; padding: 30px 34px 16px; }
  .phone-app-index {
    grid-column: 2;
    grid-row: 2;
    min-height: 0;
    overflow-y: auto;
    align-content: start;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0 34px 34px;
  }
  .phone-app-card { min-height: 164px; }
  .phone-app-card:nth-child(2n) { border-right: 1px solid var(--pi-line); }
  .phone-app-card:nth-child(3n) { border-right: 0; }
  .phone-app-card-name { font-size: 22px; }

  .phone-layer-content > .phone-content-page,
  .phone-layer-content > .phone-thread,
  .phone-layer-content > .phone-detail-sheet,
  .phone-layer-content > .phone-reading-page {
    width: min(960px, 100%);
    margin-left: auto;
    margin-right: auto;
  }
  .phone-content-page { padding-top: 10px; }
  .phone-video-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .phone-ranking-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .phone-config-list { width: min(960px, 100%); margin: 0 auto; }
  .phone-settings-intro { padding-left: max(28px, calc((100% - 904px) / 2)); padding-right: max(28px, calc((100% - 904px) / 2)); }
  .phone-editor-body { width: min(900px, 100%); margin: 0 auto; }
}


/* ========================================================================== */
/* Device Inspector polish — neutral grayscale / soft INS cards               */
/* ========================================================================== */
#app-phone,
#phone-sub-app,
#phone-app-detail,
#phone-prompts-app,
#phone-prompt-edit-modal,
#phone-new-app-modal {
  --pi-bg: #f2f2f2;
  --pi-paper: #ffffff;
  --pi-ink: #171717;
  --pi-muted: rgba(23,23,23,.60);
  --pi-faint: rgba(23,23,23,.40);
  --pi-line: rgba(23,23,23,.09);
  --pi-line-strong: rgba(23,23,23,.20);
  --pi-card-shadow: 0 10px 30px rgba(0,0,0,.055), 0 2px 8px rgba(0,0,0,.035);
  --pi-card-shadow-hover: 0 15px 38px rgba(0,0,0,.075), 0 3px 10px rgba(0,0,0,.045);
}

.phone-inspector-topbar,
.phone-layer-topbar {
  position: relative;
  background: rgba(248,248,248,.92);
  border-bottom-color: rgba(0,0,0,.07);
  box-shadow: 0 1px 0 rgba(255,255,255,.76);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* Keep the current-app refresh control anchored in the actual upper-right slot. */
.phone-layer-topbar > .phone-sub-refresh-button {
  justify-self: end;
  grid-column: 3;
  grid-row: 1;
}

.phone-icon-button,
.phone-action-button,
.phone-text-button,
.phone-secondary-button {
  border-color: rgba(0,0,0,.08);
  background: rgba(255,255,255,.72);
  box-shadow: 0 1px 3px rgba(0,0,0,.035);
  border-radius: 12px;
}
.phone-icon-button:hover,
.phone-action-button:hover,
.phone-text-button:hover,
.phone-secondary-button:hover {
  background: #fff;
  border-color: rgba(0,0,0,.14);
}

.phone-contact-select,
.phone-device-workspace,
.phone-layer-content { background: #f2f2f2; }

.phone-contact-intro {
  background: linear-gradient(180deg, #f7f7f7 0%, #f2f2f2 100%);
  border-bottom-color: transparent;
}
.phone-contact-search {
  padding: 11px 14px;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  background: rgba(255,255,255,.88);
  box-shadow: 0 6px 20px rgba(0,0,0,.035);
}

.phone-device-list { padding-top: 0; }
.phone-list-heading { border-bottom: 0; }
#phone-device-list-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.phone-device-row {
  grid-template-columns: 58px minmax(0,1fr) auto;
  gap: 14px;
  padding: 13px 14px;
  border: 1px solid rgba(0,0,0,.055);
  border-radius: 20px;
  background: rgba(255,255,255,.92);
  box-shadow: var(--pi-card-shadow);
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, opacity .16s ease;
}
.phone-device-row:hover {
  background: #fff;
  transform: translateY(-1px);
  box-shadow: var(--pi-card-shadow-hover);
}
.phone-device-row:active { transform: scale(.992); opacity: .82; }
.phone-device-avatar {
  width: 58px;
  height: 64px;
  border-radius: 16px;
  background: #e4e4e4;
  filter: none !important;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.55);
}
.phone-device-avatar img { filter: none !important; }
.phone-device-row-state {
  padding-left: 10px;
  border-left: 1px solid rgba(0,0,0,.06);
}

.phone-device-workspace { padding: 14px; gap: 14px; }
.phone-device-dossier {
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.055);
  border-radius: 24px;
  background: #fff;
  box-shadow: var(--pi-card-shadow);
}
.phone-device-portrait {
  filter: none !important;
  border-color: rgba(0,0,0,.06);
  background-color: #dedede;
}
.phone-device-copy { background: #fff; }
.phone-workspace-heading {
  margin-top: 2px;
  padding-left: 6px;
  padding-right: 6px;
}
.phone-app-index {
  gap: 12px;
  border-top: 0;
  margin-left: 0;
  margin-right: 0;
}
.phone-app-card,
.phone-app-card:nth-child(2n),
.phone-app-card:nth-child(3n) {
  border: 1px solid rgba(0,0,0,.055);
  border-right: 1px solid rgba(0,0,0,.055);
  border-bottom: 1px solid rgba(0,0,0,.055);
  border-radius: 20px;
  background: rgba(255,255,255,.94);
  box-shadow: var(--pi-card-shadow);
  padding: 15px;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, opacity .16s ease;
}
.phone-app-card:hover {
  background: #fff;
  transform: translateY(-2px);
  box-shadow: var(--pi-card-shadow-hover);
}
.phone-app-card:active { transform: scale(.985); opacity: .84; }
.phone-app-icon {
  border-color: rgba(0,0,0,.09);
  border-radius: 12px;
  background: #f4f4f4;
}
.phone-app-status-dot { border-radius: 50%; }

/* Sub-app records: keep the same neutral card language after drilling in. */
.phone-content-page { padding-top: 10px; }
.phone-content-hero { border-bottom: 0; }
.phone-record-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 0;
}
.phone-record-row {
  padding: 12px 13px;
  border: 1px solid rgba(0,0,0,.055);
  border-radius: 17px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 7px 22px rgba(0,0,0,.04);
}
.phone-record-row:hover { background: #fff; }
.phone-record-icon {
  border-color: rgba(0,0,0,.075);
  border-radius: 12px;
  background: #f5f5f5;
}
.phone-message-bubble,
.phone-editor-input,
.phone-editor-textarea,
.phone-refresh-panel {
  background: #fff;
}
.phone-message-bubble { border-radius: 16px; }
.phone-message-row.is-self .phone-message-bubble { background: #171717; color: #fff; }
.phone-refresh-panel {
  border: 0;
  border-radius: 22px;
  box-shadow: 0 24px 70px rgba(0,0,0,.18);
}

@media (min-width: 820px) {
  .phone-contact-select {
    gap: 18px;
    padding: 18px;
    grid-template-columns: minmax(300px,.82fr) minmax(440px,1.18fr);
  }
  .phone-contact-intro {
    border: 1px solid rgba(0,0,0,.05);
    border-right: 1px solid rgba(0,0,0,.05);
    border-radius: 26px;
    box-shadow: var(--pi-card-shadow);
  }
  .phone-device-list {
    padding: 22px;
    border: 1px solid rgba(0,0,0,.05);
    border-radius: 26px;
    background: rgba(255,255,255,.42);
    box-shadow: var(--pi-card-shadow);
  }
  .phone-device-workspace:not(.hidden) {
    padding: 18px;
    gap: 18px;
    grid-template-columns: minmax(280px,32%) minmax(0,1fr);
  }
  .phone-device-dossier {
    border-right: 1px solid rgba(0,0,0,.055);
  }
  .phone-device-portrait { border-bottom-color: rgba(0,0,0,.06); }
  .phone-workspace-heading { padding: 14px 8px 2px; }
  .phone-app-index {
    margin: 0;
    padding: 0 2px 18px;
    gap: 14px;
  }
  .phone-app-card,
  .phone-app-card:nth-child(2n),
  .phone-app-card:nth-child(3n) {
    border-right: 1px solid rgba(0,0,0,.055);
  }
}


/* ===== v1.0.0 小剧场透明玻璃气泡 + 自定义背景 ===== */
/* 背景图通过 --theater-bg-image 注入，仅 theater-mode 生效；深/浅模式只决定背景兜底色与顶栏文字。 */
/* 深/浅模式使用各自主题底色；默认模式不覆盖普通线下聊天原有背景。
   v1.0.0 变更：彻底移除 backdrop-filter 磨砂（原 blur 5px 在移动端滚动/流式时 GPU 采样开销极大，
   且旧版滚动时会临时关闭 blur 导致"一移动就变透明玻璃"的观感跳变）。
   现在统一为无模糊的透明玻璃：纯半透明背景 + 细边框，静止与滚动样式完全一致，
   背景不透明度略作上调（0.22 → 0.32）以补偿失去模糊后的文字可读性。 */
#offline-chat-detail.theater-mode.theater-dark {
  background-color: #111111 !important;
  background-image: var(--theater-bg-image, none) !important;
}
#offline-chat-detail.theater-mode.theater-light {
  background-color: #ffffff !important;
  background-image: var(--theater-bg-image, none) !important;
}
/* 只要用户设置了小剧场背景，三个模式都优先显示该图片；未设置时 default 完全交还原聊天背景。 */
#offline-chat-detail.theater-mode.theater-has-bg {
  background-image: var(--theater-bg-image) !important;
  /* 小剧场背景优先完整显示：cover 会按容器比例裁切并产生“局部放大”的观感。 */
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-attachment: scroll !important;
}

/* 消息区保持透明，让背景透出来。 */
#offline-chat-detail.theater-mode #offline-msg-flow,
#offline-chat-detail.theater-mode .message-list,
#offline-chat-detail.theater-mode .chat-container,
#offline-chat-detail.theater-mode .chat-page {
  background: transparent !important;
}

/* 双方气泡：统一白色透明玻璃（无磨砂）+ 细边框 + 无阴影。 */
#offline-chat-detail.theater-mode .chat-ai .chat-bubble,
#offline-chat-detail.theater-mode .chat-user .chat-bubble,
#offline-chat-detail.theater-mode.inverted-world .chat-ai .chat-bubble,
#offline-chat-detail.theater-mode.inverted-world .chat-user .chat-bubble,
#offline-chat-detail.theater-mode.theater-light .chat-ai .chat-bubble,
#offline-chat-detail.theater-mode.theater-light .chat-user .chat-bubble,
#offline-chat-detail.theater-mode.theater-light.inverted-world .chat-ai .chat-bubble,
#offline-chat-detail.theater-mode.theater-light.inverted-world .chat-user .chat-bubble {
  position: relative !important;
  background: rgba(255, 255, 255, 0.32) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border: 1px solid rgba(255, 255, 255, 0.30) !important;
  color: #222222 !important;
  overflow: visible !important;
  z-index: 1 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* 没有背景图时，深色模式需要略亮文字以维持可读性；设置背景后 JS 会加 theater-has-bg，统一切回深色字。 */
#offline-chat-detail.theater-mode.theater-dark:not(.theater-has-bg) .chat-ai .chat-bubble,
#offline-chat-detail.theater-mode.theater-dark:not(.theater-has-bg) .chat-user .chat-bubble {
  background: rgba(255, 255, 255, 0.10) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  color: #f3f3f3 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* 输入区：深色与浅色小剧场底栏都必须是纯色，不随自定义背景进入磨砂状态。
   注意：这一段位于文件后部，会覆盖前面的基础 theater 样式，因此主题规则在这里最终收口。 */
#offline-chat-detail.theater-mode.theater-light #offline-input-panel-container {
  background: #ffffff !important;
  background-image: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: none !important;
}
#offline-chat-detail.theater-mode.theater-light #offline-msg-input {
  background: #f5f5f5 !important;
  background-image: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border: 1px solid rgba(0, 0, 0, 0.10) !important;
  color: #222222 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
#offline-chat-detail.theater-mode.theater-light #offline-msg-input::placeholder {
  color: rgba(34, 34, 34, 0.50) !important;
}

/* 深色小剧场：无论是否上传背景图，底栏都使用不透明深色，彻底禁用 backdrop-filter。
   输入框也关闭背景模糊，避免背景图透过输入区域产生“整条底栏仍是磨砂”的观感。 */
#offline-chat-detail.theater-mode.theater-dark #offline-input-panel-container {
  background: #121212 !important;
  background-image: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border-top: 1px solid rgba(255, 255, 255, 0.10) !important;
  box-shadow: none !important;
}
#offline-chat-detail.theater-mode.theater-dark #offline-msg-input {
  background: #232323 !important;
  background-image: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #ffffff !important;
  box-shadow: none !important;
  text-shadow: none !important;
}
#offline-chat-detail.theater-mode.theater-dark #offline-msg-input::placeholder {
  color: rgba(255, 255, 255, 0.42) !important;
}
#offline-chat-detail.theater-mode.theater-dark:not(.theater-has-bg) #offline-msg-input {
  background: rgba(255, 255, 255, 0.10) !important;
  color: #ffffff !important;
}
#offline-chat-detail.theater-mode.theater-dark:not(.theater-has-bg) #offline-msg-input::placeholder {
  color: rgba(255, 255, 255, 0.42) !important;
}

/* 小剧场范围内移除气泡/输入相关阴影与文字描边，避免影响全站其它页面。 */
#offline-chat-detail.theater-mode .chat-bubble,
#offline-chat-detail.theater-mode:not(.theater-default) #offline-input-panel-container,
#offline-chat-detail.theater-mode:not(.theater-default) #offline-msg-input {
  box-shadow: none !important;
  text-shadow: none !important;
}

/* ===== v1.0.0 小剧场流式滚动性能 =====
   1) 小剧场背景挂在固定聊天页容器上，实际滚动的是内部消息流；无需 background-attachment:fixed。
      移动 WebView 中 fixed 背景会显著增加滚动合成成本。
   2) v1.0.0 起气泡已改为"透明玻璃"（backdrop-filter:none），滚动与流式期间不再需要
      临时关闭 blur 的降级规则，静止与滚动观感完全一致，也不再出现
      "一滚动就从磨砂变透明"的样式跳变。原 is-streaming / theater-scroll-active
      降级选择器已全部移除。 */
#offline-chat-detail.theater-mode:not(.theater-default),
#offline-chat-detail.theater-mode.theater-default.theater-has-bg {
  background-attachment: scroll !important;
}


/* ===== 小剧场默认模式 =====
   默认模式只保留小剧场布局/气泡能力，不改普通线下聊天的顶栏、输入栏、图标和底部导航配色。
   没有专属小剧场背景时不声明 background，让 applyChatWallpaper() / 初始 bg-[#ededed] 原样生效。 */

/* ===== 修复：小剧场背景图下的主题栏层级 ===== */
/* 底部导航也按主题固定为实色，避免上传背景图后继承全局毛玻璃。 */
#offline-chat-detail.theater-mode.theater-dark ~ #wm-tab-nav,
body:has(#offline-chat-detail.theater-mode.theater-dark) #wm-tab-nav {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background: #111111 !important;
  background-image: none !important;
}
#offline-chat-detail.theater-mode.theater-light ~ #wm-tab-nav,
body:has(#offline-chat-detail.theater-mode.theater-light) #wm-tab-nav {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background: #ffffff !important;
  background-image: none !important;
  border-top-color: rgba(0, 0, 0, 0.08) !important;
}

/* 浅色小剧场顶栏图标使用深色，避免被通配符颜色覆盖成白色。 */
#offline-chat-detail.theater-mode.theater-light #chat-top-bar-offline svg,
#offline-chat-detail.theater-mode.theater-light #chat-top-bar-offline svg * {
  stroke: #1a1a1a !important;
  color: #1a1a1a !important;
}
#offline-chat-detail.theater-mode.theater-light #chat-top-bar-offline button {
  color: #1a1a1a !important;
}


/* ============================================================
   v1.0.2 小剧场磨砂终极禁用（防注入兜底）
   ──────────────────────────────────────────────────────────
   背景：用户的"气泡美化 → 自定义CSS"（保存在 localStorage，不随
   代码包更新）可能带有 backdrop-filter 磨砂（如最早的 blur(5px) 版本），
   由 #dynamic-bubble-style 注入 <head> 末尾，导致升级后小剧场气泡
   "仍是磨砂玻璃"。本规则在样式层把小剧场容器内一切元素的
   backdrop-filter 强制关闭：ID 选择器特异性 (0,1,1,0) 高于注入 CSS
   常见的类选择器组合 (0,0,2,0)，可稳定压制。
   配套：icons_desktop_2.js 在小剧场模式下注入 customCss 前会先剥离
   backdrop-filter 声明，此处为纯 CSS 双保险。
   ============================================================ */
#offline-chat-detail.theater-mode *,
#offline-chat-detail.theater-mode *::before,
#offline-chat-detail.theater-mode *::after {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}