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



/* 本地英文花体：避免 Google Fonts / 离线 / PWA 缓存失败时退回普通字体 */
@font-face {
  font-family: 'Italianno';
  src: url('../fonts/italianno-latin.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

/* Ins风低饱和柔和美学重置 */

:root {

  --mo-blue: #8fa3b8;

  --mo-blue-light: #f1f4f8;

  --mo-blue-dark: #768a9f;

  --mo-purple: #bbaec6;

  --mo-pink: #d9b8c4;

  --mo-green: #9ebdb6;

  --mo-yellow: #d1bfae;

  --mo-bg: #f9f9f9;

  --mo-status: #4b4b4b;

  --mo-status-light: #f1ece4;

  --mo-batt-fill: #d0d0d0;

  --mo-batt-fill-light: #f1ece4;

}

/* 状态栏三件套（信号/WiFi/电池）统一改为柔和低饱和的ins风配色，覆盖全部界面 */

#home-status-icons { color: var(--mo-status) !important; }

#home-batt-body { border-color: var(--mo-status) !important; }

#battery-level { background-color: var(--mo-batt-fill) !important; }

body { background-color: var(--mo-bg) !important; color: #444; overscroll-behavior:none; overflow:hidden; -webkit-user-select:none; user-select:none; }
input,textarea,select,[contenteditable="true"] { -webkit-user-select:text; user-select:text; }

.bg-blue-500 { background-color: var(--mo-blue) !important; }

.text-blue-500 { color: var(--mo-blue) !important; }

.border-blue-500 { border-color: var(--mo-blue) !important; }

.accent-blue-500 { accent-color: var(--mo-blue) !important; }

.bg-blue-50 { background-color: var(--mo-blue-light) !important; }

.text-blue-600 { color: var(--mo-blue-dark) !important; }

.bg-purple-500 { background-color: var(--mo-purple) !important; }

.text-purple-500 { color: var(--mo-purple) !important; }

.bg-pink-500 { background-color: var(--mo-pink) !important; }

.text-pink-500 { color: var(--mo-pink) !important; }

.bg-[#07C160] { background-color: var(--mo-green) !important; color: white !important; }
.text-[#07C160] { color: var(--mo-green) !important; }
.border-[#07C160] { border-color: var(--mo-green) !important; }
.accent-[#07C160] { accent-color: var(--mo-green) !important; }

.shadow-sm { box-shadow: 0 2px 10px rgba(0,0,0,0.02) !important; }

.shadow-md { box-shadow: 0 4px 20px rgba(0,0,0,0.04) !important; }

.shadow-xl { box-shadow: 0 10px 30px rgba(0,0,0,0.06) !important; }

.rounded-xl { border-radius: 18px !important; }

.rounded-2xl { border-radius: 22px !important; }

.rounded-3xl { border-radius: 28px !important; }

.border { border-color: rgba(0,0,0,0.04) !important; }

.sub-app-screen { background-color: var(--mo-bg) !important; }

.bg-[#f4f4f4], .bg-[#ededed], .bg-[#f7f7f7] { background-color: var(--mo-bg) !important; }

#splash-screen { position: fixed; inset: 0; background-color: #ffffff; z-index: 999999; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: opacity 0.8s ease; }

#splash-line1 { font-size: 13px; font-weight: 300; color: #1a1a1a; letter-spacing: 0.07em; font-family: -apple-system, 'PingFang SC', 'Noto Sans SC', 'Helvetica Neue', sans-serif; opacity: 0; animation: splash-fadein 0.8s ease 0.2s forwards; text-align: center; margin: 0 24px 12px; line-height: 1.6; }

#splash-line2 { font-size: 11px; font-weight: 300; color: #aaaaaa; letter-spacing: 0.14em; font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif; opacity: 0; animation: splash-fadein 0.8s ease 0.6s forwards; text-align: center; margin: 0 24px; line-height: 1.6; }

@keyframes splash-fadein { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } }



/* ===== SECTION BREAK ===== */



body { background-size: cover; } /* background-color 由上方 --mo-bg !important 控制；此行仅保留 cover 供 JS 动态壁纸使用 */



/* ===== SECTION BREAK ===== */



html { font-size: 90% !important; }

.chat-item { display: flex; align-items: flex-start; gap: 7px; margin-bottom: 7px; }

.chat-user { flex-direction: row-reverse; }

.chat-ai { flex-direction: row; }

.chat-avatar { width: 32px; height: 32px; flex-shrink: 0; position: relative; z-index: 10; }

.chat-avatar-inner { width: 100%; height: 100%; overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 14px; background: #f1f1f1; }

/* ── 顶部栏联系人头像（形状由「聊天界面设置」单独控制，不受气泡主题影响） ── */
.topbar-avatar { width: 36px; height: 36px; flex-shrink: 0; margin-right: 9px; position: relative; z-index: 10; }
.topbar-avatar-inner { width: 100%; height: 100%; overflow: hidden; display: flex; align-items: center; justify-content: center; font-size: 16px; background: #f0f0f0; border-radius: 6px; }
.topbar-avatar-inner img { width: 100%; height: 100%; object-fit: cover; }

/* ── 顶栏角色名：常规字体 ── */
.chat-name-text { font-family: inherit !important; }

/* ── 顶栏居中模式（头像正中间，不显示名字）── */
.chat-topbar.topbar-center-mode { flex-direction: column; gap: 0; }
.chat-topbar.topbar-center-mode .topbar-back-btn { position: absolute; left: 6px; top: 50%; transform: translateY(-50%); }
.chat-topbar.topbar-center-mode .topbar-info-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; }
.chat-topbar.topbar-center-mode .topbar-avatar { margin-right: 0; margin-bottom: 0; }
.chat-topbar.topbar-center-mode .topbar-name-col { display: none !important; }
.chat-topbar.topbar-center-mode #conquest-display,
.chat-topbar.topbar-center-mode #offline-conquest-display { display: none !important; }
.chat-topbar.topbar-center-mode #inner-voice-card,
.chat-topbar.topbar-center-mode #offline-inner-voice-card { left: 50%; transform: translateX(-50%); }
.chat-topbar.topbar-center-mode .topbar-right-actions { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); }

/* ── 顶部栏 token 信息（深灰色浅色小字） ── */
.topbar-token-info { font-size: 10px; color: #9a9a9a; font-weight: 500; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 45vw; letter-spacing: 0.01em; transition: color 0.3s ease; }
.topbar-token-info.streaming { color: #6b6b6b; }
/* 小剧场模式：token 文字变白（略低于名字亮度，形成层次） */
#offline-chat-detail.theater-mode.theater-dark #chat-top-bar-offline .topbar-token-info { color: rgba(255,255,255,0.65) !important; }
#offline-chat-detail.theater-mode.theater-dark #chat-top-bar-offline .topbar-token-info.streaming { color: #ffffff !important; }
/* 小剧场模式：顶栏头像保留可见、加细微描边融入暗色 */
#offline-chat-detail.theater-mode.theater-dark .topbar-avatar-inner { background: rgba(255,255,255,0.08); }

.chat-bubble { max-width: 70%; padding: 7px 11px; border-radius: 16px; line-height: 1.4; word-break: break-all; white-space: pre-wrap; cursor: pointer; transition: background-color 0.2s ease, transform 0.15s ease; touch-action: pan-y; position: relative; }

.chat-sys { display: flex; justify-content: center; margin: 11px 0; width: 100%; }

.chat-sys-inner { background: rgba(0,0,0,0.08); color: #666; font-size: 10px; padding: 4px 11px; border-radius: 11px; max-width: 85%; text-align: center; word-break: break-word; white-space: pre-wrap; cursor: pointer; transition: background 0.2s; touch-action: pan-y; }

.chat-sys-inner:hover { background: rgba(0,0,0,0.12); }

#bubble-quote-indicator { position: absolute; top: 0; left: 0; width: 26px; height: 26px; border-radius: 50%; background: rgba(0,0,0,0.35); color: #fff; display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 6; opacity: 0; transition: background-color 0.15s ease; }

#bubble-quote-indicator svg { width: 13px; height: 13px; }

#bubble-quote-indicator.ready { background: #07C160; }


.no-scrollbar::-webkit-scrollbar{display:none;}

/* ── 桌面滑动性能 ── */
#desktop-pages-track{transform:translateZ(0);-webkit-transform:translateZ(0);backface-visibility:hidden;-webkit-backface-visibility:hidden;}
/* touch-action:pan-y 允许浏览器处理纵向滚动，但不拦截横向滑动和双指捏合，
   确保捏合手势的 touchmove 事件能到达 document 级监听器。 */
#desktop-slider{touch-action:pan-y;}
#desktop-page-1,#desktop-page-2{contain:layout style paint;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform:translateZ(0);}
#dock-container{contain:layout style paint;transform:translateZ(0);}
.app-icon{transition:transform 0.15s ease!important;}
/* ── 渲染隔离 + GPU 合成层 ── */
/* v1.0.0 页面切换优化：will-change 不再常驻声明（30+ App 同时保留合成层提示会显著增加
   显存与合成开销，导致切换掉帧）。现由 openApp/closeApp 在过渡期间动态设置、
   动画结束后自动释放（见 js/app_utils.js）。 */
.sub-app-screen{display:none;position:fixed;inset:0;background:var(--mo-bg);z-index:100;flex-direction:column;opacity:0;transform:translateY(16px) scale(0.99);transition:opacity 0.22s cubic-bezier(0.4,0,0.2,1),transform 0.22s cubic-bezier(0.4,0,0.2,1);contain:layout style paint;backface-visibility:hidden;-webkit-backface-visibility:hidden;content-visibility:auto;contain-intrinsic-size:0 100vh;pointer-events:none;}
.sub-app-screen.app-visible{opacity:1;transform:translateY(0) scale(1);content-visibility:visible;pointer-events:auto;}
/* 聊天详情页进入动画 */
/* v1.0.0：will-change 改由 openChatDetail/closeChatDetail（及 offline 对应函数）
   在过渡期间动态设置、动画结束后释放，不再常驻合成层提示。 */
#chat-detail,#offline-chat-detail{transition:opacity 0.22s cubic-bezier(0.4,0,0.2,1),transform 0.22s cubic-bezier(0.4,0,0.2,1);opacity:0;transform:translateY(16px);}
#chat-detail.chat-visible,#offline-chat-detail.chat-visible{opacity:1;transform:translateY(0);}

.top-z-app{z-index:200;}

.nav-tab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:10px;color:#555;cursor:pointer;}

.nav-tab.active{color:var(--mo-green);}

.tab-content{display:none;flex:1;overflow-y:auto;contain:layout style;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;}

.tab-content.active{display:block;}

#wechat-bottom-nav{flex-shrink:0;}

#msg-input{max-height:108px;min-height:32px;}

.moment-item { background: #fff; padding: 14px 13px; border-bottom: 1px solid #eee; display: flex; gap: 9px; position: relative; }

.moment-avatar { width: 38px; height: 38px; border-radius: 7px; overflow: hidden; flex-shrink: 0; }

.moment-avatar img { width: 100%; height: 100%; object-fit: cover; }

.moment-content { flex: 1; min-width: 0; }

.moment-name { font-size: 14px; font-weight: 600; color: #576b95; margin-bottom: 2px;}

.moment-text { font-size: 14px; color: #111; margin: 4px 0; line-height: 1.5; word-wrap: break-word; white-space: pre-wrap;}

.moment-time { font-size: 11px; color: #999; margin-top: 7px; }

.moment-img { max-width: 135px; max-height: 135px; border-radius: 4px; margin-top: 7px; background:#f1f1f1; overflow: hidden; }

.moment-img img { width: 100%; height: auto; object-fit: cover; }

.moment-img-square { max-width: 180px; background: #f0f0f0; border-radius: 4px; margin-top: 7px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; color: #666; padding: 11px; box-sizing: border-box; text-align: left; word-break: break-word; border: 1px dashed #ccc; }

.moment-interaction { background: #f7f7f7; border-radius: 4px; margin-top: 9px; position: relative; }

.moment-like { padding: 5px 7px; font-size: 12px; color: #576b95; font-weight: 500; border-bottom: 1px solid rgba(0,0,0,0.03); }

.moment-like:last-child { border-bottom: none; }

.moment-comment { padding: 4px 7px; font-size: 12px; position: relative; }

.comment-item { margin-top: 4px; font-size: 12px; cursor: pointer; padding: 2px 0; transition: background 0.2s; word-break: break-word; line-height: 1.4; user-select: none; -webkit-user-select: none; }

.comment-item:hover { background: rgba(0,0,0,0.05); }

.comment-name { color: #576b95; font-weight: 600; }

.comment-content { color: #111; white-space: pre-wrap; }

.moment-del-btn { position: absolute; right: 9px; top: 9px; z-index: 10; }

.contact-item-container { position: relative; width: 100%; overflow: hidden; touch-action: pan-y; border-bottom: 1px solid #eee; }

.contact-content { display: flex; align-items: center; gap: 14px; padding: 14px; background: #fff; transition: transform 0.2s ease; width: 100%; cursor: pointer; box-sizing: border-box; }

.contact-actions { position: absolute; top: 0; right: 0; height: 100%; display: flex; align-items: center; gap: 2px; transform: translateX(100%); transition: transform 0.2s ease; padding-right: 4px; background: #fff; }

.contact-actions button { height: 100%; min-width: 63px; border: none; font-size: 13px; font-weight: 500; cursor: pointer; transition: opacity 0.2s; display: flex; align-items: center; justify-content: center; }

.contact-actions button:active { opacity: 0.7; }

.btn-delete { background: #ff3b30; color: white; border-radius: 0; }

.btn-pin { background: var(--mo-green); color: white; border-radius: 0; }

.contact-item-container.swiped .contact-content { transform: translateX(-30%); }

.contact-item-container.swiped .contact-actions { transform: translateX(0); }

.contact-separator { height: 9px; background-color: var(--mo-bg); width: 100%; }

.image-preview { max-width: 100%; max-height: 135px; margin-top: 7px; border-radius: 7px; overflow: hidden; display: none; }

.image-preview img { width: 100%; height: auto; object-fit: cover; }

.app-icon { touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-user-drag: none; }

/* v285: 小组件内图片禁止触发浏览器原生行为（长按预览/保存图片菜单、原生图片拖拽），
   网页部署后拖动含图片的小组件不再被系统图片操作打断 */
.app-icon img,
[data-img-widget] img,
[data-postcard-widget] img,
[data-html-widget] img {
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
    user-select: none;
    -webkit-user-select: none;
    pointer-events: none;
}

/* v283 拖拽落点高亮：拖动图标时其他图标保持固定，仅高亮当前吸附格子 */
.app-icon.drop-target {
    opacity: 1 !important;
    outline: 2px dashed rgba(255, 255, 255, 0.85);
    outline-offset: 3px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.14);
    transition: opacity 0.12s ease;
}

/* v284 小组件拖拽虚线占位框：拖动 1×2 / 2×1 / 2×2 / 4×2 等小组件时，
   在目标网格中以绝对定位跨格放置，覆盖组件完整占位范围 */
/* v285 修复：占位框是 grid 内的 absolute 子元素，按 grid-column/grid-row 定位后
   包含块为组件覆盖的网格区域，此前未设宽高导致收缩成 0×0（只看到一个点）。
   width/height:100% 相对该网格区域，即可完整铺满组件占位范围。 */
.drag-footprint {
    position: absolute;
    z-index: 40;
    pointer-events: none;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    border: 2.5px dashed rgba(255, 255, 255, 0.95);
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.16);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25), inset 0 0 24px rgba(255, 255, 255, 0.10);
}

.app-status-bar { position: absolute; top: 0; left: 0; right: 0; height: 40px; z-index: 999; display: flex; align-items: flex-start; justify-content: space-between; padding: 7px 20px 0; color: #1f2937; pointer-events: none; }
.app-status-bar .app-status-time { font-size: 13px; font-weight: 700; letter-spacing: 0.02em; line-height: 1; color: inherit; }
.app-status-bar svg { color: var(--mo-status); }
.app-status-bar .app-batt-body { border-color: var(--mo-status); }
.app-status-bar .app-battery-level { background-color: var(--mo-batt-fill); }
.app-status-bar.app-status-bar-light { color: #ffffff; }
.app-status-bar.app-status-bar-light svg { color: var(--mo-status-light); }
.app-status-bar.app-status-bar-light .app-batt-body { border-color: var(--mo-status-light); }
.app-status-bar.app-status-bar-light .app-battery-level { background-color: var(--mo-batt-fill-light); }

.wechat-profile-avatar-box { border: 2px solid white; border-radius: 11px; }

/* 里世界（暗黑模式）样式 */

#chat-detail.inverted-world, #offline-chat-detail.inverted-world { background-color: #0a0a0a !important; background-image: none !important; }

#chat-detail.inverted-world #msg-flow, #offline-chat-detail.inverted-world #offline-msg-flow { background-color: #0a0a0a; }

#chat-detail.inverted-world .chat-bubble, #offline-chat-detail.inverted-world .chat-bubble { background-color: #1a1a1a !important; color: #e0e0e0 !important; border: 1px solid #333; }

#chat-detail.inverted-world .chat-user .chat-bubble, #offline-chat-detail.inverted-world .chat-user .chat-bubble { background-color: #2d1f3d !important; color: #d0c0e0 !important; }

#chat-detail.inverted-world #chat-input-panel, #offline-chat-detail.inverted-world #offline-input-panel-container { background-color: #1a1a1a; border-top-color: #333; }

#chat-detail.inverted-world #msg-input, #offline-chat-detail.inverted-world #offline-msg-input { background-color: #2a2a2a; color: #e0e0e0; border-color: #444; }

#chat-detail.inverted-world #conquest-display .text-gray-700, #offline-chat-detail.inverted-world #offline-conquest-display .text-gray-700 { color: #ff4444 !important; }

#chat-detail.inverted-world #conquest-text, #offline-chat-detail.inverted-world #offline-conquest-text { color: #ff6666 !important; }

#chat-detail.inverted-world #inner-voice-card, #offline-chat-detail.inverted-world #offline-inner-voice-card { background-color: #1a1a1a; border-color: #444; color: #ccc; }

/* 购物专属样式 */

.shop-card { background: white; border-radius: 12px; overflow: hidden; border: 1px solid #e8e8e8; padding: 8px; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 1px 4px rgba(0,0,0,0.05); cursor: pointer; transition: transform 0.2s; height: max-content; }

.shop-card:active { transform: scale(0.96); }

.shop-img-box { background: #f2f2f2; border-radius: 8px; height: 110px; display: flex; align-items: center; justify-content: center; font-size: 28px; font-weight: bold; color: #111111; text-shadow: none; flex-shrink: 0; letter-spacing: 0.05em; }

/* 交互动态滤镜用 */

.char-pressing { transform: perspective(800px) scale(0.95) !important; transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1) !important; }

/* 适配安全区 */

.pb-safe { padding-bottom: env(safe-area-inset-bottom); }

/* SVG Icons 全局样式适配 */

.svg-icon { width: 1em; height: 1em; display: inline-block; }

/* 桌面图标容器：始终裁剪溢出内容（圆角裁剪） */
.desktop-app-icon-box { overflow: hidden; }

/* 群聊图谱连线样式 */

.graph-line { stroke: #999; stroke-width: 2; }

.graph-text { font-size: 10px; fill: #666; font-weight: bold; background: white; }

/* ─── 角色主页：莫兰迪文字云风格个性标签（无背景色，大小不一） ─── */

.char-tag-text {
    display: inline-block;
    line-height: 1.4;
    white-space: nowrap;
    cursor: default;
    user-select: none;
    transition: opacity 0.15s, transform 0.15s;
}

.char-tag-text:active {
    opacity: 0.6;
    transform: scale(0.96);
}

.ctag-xs { font-size: 11px; font-weight: 400; letter-spacing: 0.2px; }
.ctag-sm { font-size: 13px; font-weight: 500; letter-spacing: 0.2px; }
.ctag-md { font-size: 16.5px; font-weight: 600; letter-spacing: 0.1px; }
.ctag-lg { font-size: 21px; font-weight: 700; }
.ctag-xl { font-size: 26px; font-weight: 800; }

.char-tags-section {
    border-top: 1px solid rgba(0,0,0,0.06);
}

.char-tags-refresh-btn {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #aaa;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}

.char-tags-refresh-btn:active {
    background: rgba(0,0,0,0.06);
    color: #666;
}

.char-tags-empty {
    font-size: 11.5px;
    color: #bbb;
    padding: 4px 0;
    font-style: italic;
}


/* ══════════════════════════════════════════
   气泡上下文菜单 – 渐变边框 + 线性图标
   ══════════════════════════════════════════ */

/* 渐变边框：用 padding + 背景渐变模拟 border-image 与 border-radius 共存 */
.bubble-ctx-outer {
  background: linear-gradient(145deg, #d0d0d0 0%, #7a7a7a 100%);
  padding: 1.5px;
  border-radius: 15px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.14), 0 2px 8px rgba(0,0,0,0.08);
  transform-origin: top left;
  animation: ctx-pop .15s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes ctx-pop {
  from { opacity: 0; transform: scale(.88); }
  to   { opacity: 1; transform: scale(1); }
}

.bubble-ctx-inner {
  background: #ffffff;
  border-radius: 13.5px;
  padding: 11px 14px 10px;
}

.bubble-ctx-row1 {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}

.bubble-ctx-row2 {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-top: 9px;
  padding-top: 9px;
  border-top: 1px solid #f0f0f0;
}

.bubble-ctx-action {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  transition: opacity .12s, transform .12s;
  min-width: 36px;
}
.bubble-ctx-action:active {
  opacity: .55;
  transform: scale(.9);
}
.bubble-ctx-icon {
  width: 23px;
  height: 23px;
  color: #1a1a1a;
  display: block;
}
.bubble-ctx-action span {
  font-size: 10px;
  color: #333;
  white-space: nowrap;
  letter-spacing: 0.01em;
  line-height: 1;
}

/* 插入按钮角色选择 */
.insert-role-btn {
  background: #f3f4f6;
  color: #555;
  border: 1.5px solid transparent;
}
.insert-role-btn.insert-role-active {
  background: #1a1a1a;
  color: #fff;
  border-color: #1a1a1a;
}

/* 编辑弹窗渐变边框 */
.bubble-modal-outer {
  background: linear-gradient(145deg, #d0d0d0 0%, #6b7280 100%);
  padding: 2px;
  border-radius: 1.5rem; /* 24px, rounded-3xl */
  box-shadow: 0 8px 28px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.10);
  width: 100%;
  max-width: 28rem; /* max-w-md */
}
.bubble-modal-inner {
  background: #ffffff;
  border-radius: calc(1.5rem - 2px);
  overflow: hidden;
  width: 100%;
}

/* 竖向长方形编辑栏（去掉底部按钮后，整体变为竖长矩形） */
.bubble-modal-vertical {
  max-width: 22rem;
  height: 68vh;
  max-height: 580px;
}
.bubble-modal-vertical-inner {
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* ── 一起听歌小组件 - 歌词 ── */
/* 旧 CSS 动画已移除，改用 JS 时间戳驱动 transform 过渡 */
.ltw-lyric-line {
    line-height: 1.75;
    transition: color 0.3s ease;
}
/* 保留空类，防止 classList.remove 报错 */
.ltw-lyrics-animate {}

/* ── iOS 风格开关 ── */
.ios-toggle {
  position: relative;
  width: 46px;
  height: 26px;
  flex-shrink: 0;
  cursor: pointer;
}
.ios-toggle input { display: none; }
.ios-toggle-track {
  position: absolute;
  inset: 0;
  border-radius: 13px;
  background: #d1d5db;
  transition: background 0.25s ease;
}
.ios-toggle.on .ios-toggle-track {
  background: #404040;
}
.ios-toggle-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.22), 0 1px 2px rgba(0,0,0,0.12);
  transition: transform 0.25s ease;
}
.ios-toggle.on .ios-toggle-knob {
  transform: translateX(20px);
}

/* ── 插件应用位置迷你开关（线上/线下/小剧场） ── */
.plugin-scope-toggle {
  position: relative;
  width: 32px;
  height: 18px;
  flex-shrink: 0;
  cursor: pointer;
}
.plugin-scope-track {
  position: absolute;
  inset: 0;
  border-radius: 9px;
  background: #d1d5db;
  transition: background 0.25s ease;
}
.plugin-scope-toggle.on .plugin-scope-track {
  background: #404040;
}
.plugin-scope-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  transition: transform 0.25s ease;
}
.plugin-scope-toggle.on .plugin-scope-knob {
  transform: translateX(14px);
}

/* ── 插件插入位置下拉选择器 ── */
.plugin-position-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 4px 26px 4px 10px;
  font-size: 11px;
  font-weight: 600;
  color: #4b5563;
  background-color: #f9fafb;
  outline: none;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
  max-width: 180px;
}
.plugin-position-select:focus {
  border-color: #9ca3af;
  background-color: #fff;
}
.plugin-position-select:active {
  border-color: #6b7280;
}
/* 卡片内的选择器更紧凑 */
.plugin-card-position {
  font-size: 10px;
  padding: 3px 24px 3px 8px;
  border-radius: 6px;
}

/* ── 插件面板顶部导航栏（文本 / 功能 切换） ── */
.plugin-tab-bar {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: #f0f0f0;
  border-radius: 10px;
  margin-bottom: 12px;
}
.plugin-tab-btn {
  flex: 1;
  text-align: center;
  padding: 7px 0;
  font-size: 12px;
  font-weight: 600;
  color: #8a8a8a;
  border-radius: 7px;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}
.plugin-tab-btn.active {
  background: #ffffff;
  color: #1a1a1a;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.plugin-tab-btn:active { transform: scale(0.97); }

/* 功能插件类型徽章 */
.plugin-func-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  padding: 1.5px 6px;
  border-radius: 4px;
  letter-spacing: 0.04em;
  vertical-align: middle;
  margin-left: 6px;
}
.plugin-func-badge.card { background: #1a1a1a; color: #fff; }
.plugin-func-badge.regex { background: #f0f0f0; color: #595959; }
.plugin-func-badge.script { background: #eef2ff; color: #4f46e5; }
.plugin-func-badge.style { background: #ecfeff; color: #0e7490; }
.plugin-func-badge.extension { background: #f5f3ff; color: #7c3aed; }

/* 功能插件编辑区代码风格文本框 */
.plugin-code-textarea {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  line-height: 1.6;
  letter-spacing: 0;
}

/* ── 思考链 ── */
.thinking-chain-wrapper {
  display: block;
  padding: 2px 16px 6px 16px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.thinking-chain-block {
  cursor: pointer;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  user-select: none;
}
.thinking-header {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #5a5a5a;
  font-size: 11.5px;
  line-height: 1;
}
.thinking-dots {
  display: flex;
  gap: 3px;
  align-items: center;
}
.thinking-dots span {
  display: block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #8a8a8a;
}
.thinking-label {
  color: #6a6a6a;
  font-size: 11.5px;
  letter-spacing: 0.02em;
}
.thinking-chevron {
  display: inline-block;
  color: #8a8a8a;
  font-size: 13px;
  line-height: 1;
  transition: transform 0.2s ease;
  transform: rotate(0deg);
}
.thinking-chain-block.open .thinking-chevron {
  transform: rotate(90deg);
}
.thinking-body {
  display: none;
  color: #5a5a5a;
  font-size: 11px;
  white-space: pre-wrap;
  line-height: 1.65;
  margin-top: 6px;
  padding-left: 2px;
  max-height: 280px;
  overflow-y: auto;
  word-break: break-all;
}
.thinking-chain-block.open .thinking-body {
  display: block;
}
@keyframes thinking-dot-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
  30% { transform: translateY(-4px); opacity: 1; }
}
.thinking-chain-block.thinking-streaming .thinking-dots span {
  animation: thinking-dot-bounce 1.1s ease-in-out infinite;
}
.thinking-chain-block.thinking-streaming .thinking-dots span:nth-child(2) {
  animation-delay: 0.18s;
}
.thinking-chain-block.thinking-streaming .thinking-dots span:nth-child(3) {
  animation-delay: 0.36s;
}
.thinking-chain-block.thinking-streaming .thinking-label {
  color: #4a7fcb;
}
.thinking-chain-block.thinking-streaming .thinking-body {
  color: #4a4a4a;
}
.streaming-active::after {
  content: '▎';
  display: inline-block;
  color: #888;
  animation: streaming-blink 0.7s steps(1) infinite;
  margin-left: 1px;
  font-size: 0.95em;
  vertical-align: baseline;
}
@keyframes streaming-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
/* ── 自定义主题 Modal 动效 ── */
#custom-theme-modal {
  transition: opacity 0.18s ease;
}
#custom-theme-modal.hidden {
  opacity: 0;
  pointer-events: none;
}
#custom-theme-modal > div {
  transform: translateY(0);
  transition: transform 0.22s cubic-bezier(0.25,0.46,0.45,0.94);
}
#custom-theme-modal.hidden > div {
  transform: translateY(100%);
}

/* ══════════════════════════════════════
   锁屏 (iOS 风格)
   ══════════════════════════════════════ */
#lock-screen {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  transition: transform 0.42s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.42s ease;
  will-change: transform, opacity;
  touch-action: pan-y;
}
#lock-screen.lock-unlocking {
  transform: translateY(-100%);
  opacity: 0;
}
#lock-screen.lock-hidden { display: none; }

/* 背景层 */
#lock-bg-blur {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-image: linear-gradient(180deg,#0a0a0a 0%,#2a2a2a 40%,#555555 70%,#888888 88%,#b8b8b8 100%);
  background-color: #0a0a0a;
  filter: none;
  z-index: 0;
  transition: background-image 0.3s ease;
}

/* 内容层 */
#lock-content {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: env(safe-area-inset-top, 14px) 24px 0;
}

/* 顶部状态栏 */
#lock-status-row {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0 0;
}
#lock-status-time {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.04em;
  font-family: -apple-system, 'SF Pro Text', 'Helvetica Neue', sans-serif;
}
#lock-status-icons {
  display: flex;
  align-items: center;
}

/* 时钟区域 — 置于屏幕上 1/3 处 */
#lock-clock-block {
  margin-top: 7vh;
  text-align: center;
  line-height: 1;
}
/* 日期 — 位于时间上方 */
#lock-date {
  margin-top: 0;
  margin-bottom: 6px;
  font-size: clamp(15px, 4.2vw, 18px);
  font-weight: 400;
  color: rgba(255,255,255,0.88);
  letter-spacing: 0.03em;
  font-family: -apple-system, 'SF Pro Text', 'Helvetica Neue', sans-serif;
  text-shadow: 0 1px 8px rgba(0,0,0,0.28);
}
/* 大时间 — 文字本体透明：字形镂空透出锁屏背景，仅靠高光描边与深阴影勾勒边缘 */
#lock-time {
  font-size: clamp(96px, 32vw, 146px);
  font-weight: 800;
  letter-spacing: -0.04em;
  font-family: -apple-system, 'SF Pro Display', 'Helvetica Neue', sans-serif;
  line-height: 0.88;
  display: block;
  transform: scaleX(0.9) scaleY(1.15);
  transform-origin: top center;
  /* 文字本体完全透明，透出锁屏背景 → 镂空通透感 */
  color: transparent;
  /* 玻璃质感：上边高光描边 + 底部深阴影，模拟玻璃材质反光，保证镂空字形可读 */
  text-shadow:
    0 1px 0 rgba(255,255,255,0.75),
    0 -1px 0 rgba(255,255,255,0.35),
    0 2px 2px rgba(255,255,255,0.25),
    0 6px 20px rgba(0,0,0,0.55),
    0 2px 8px rgba(0,0,0,0.4);
}

/* 解锁提示 — 固定在底部安全区上方 */
#lock-unlock-hint {
  position: absolute;
  bottom: calc(env(safe-area-inset-bottom, 16px) + 28px);
  left: 0; right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
#lock-hint-line {
  width: 40px;
  height: 1px;
  background: rgba(255,255,255,0.25);
  border-radius: 1px;
  margin-bottom: 2px;
}
#lock-chevron {
  animation: lock-chevron-pulse 1.8s ease-in-out infinite;
}
@keyframes lock-chevron-pulse {
  0%, 100% { opacity: 0.45; transform: translateY(0); }
  50%       { opacity: 0.9;  transform: translateY(-4px); }
}
#lock-hint-text {
  font-size: 13px;
  font-weight: 400;
  color: rgba(255,255,255,0.65);
  letter-spacing: 0.06em;
  font-family: -apple-system, 'SF Pro Text', 'Helvetica Neue', sans-serif;
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.35) 0%,
    rgba(255,255,255,0.85) 40%,
    rgba(255,255,255,1)    50%,
    rgba(255,255,255,0.85) 60%,
    rgba(255,255,255,0.35) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: lock-shimmer 2.4s linear infinite;
}
@keyframes lock-shimmer {
  from { background-position: 200% center; }
  to   { background-position: -200% center; }
}

/* Home 横条 */
#lock-home-indicator {
  position: relative;
  z-index: 1;
  height: calc(env(safe-area-inset-bottom, 8px) + 20px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: max(env(safe-area-inset-bottom, 6px), 6px);
}
#lock-home-indicator::after {
  content: '';
  display: block;
  width: 120px;
  height: 4px;
  background: rgba(255,255,255,0.55);
  border-radius: 2px;
}


/* ===== SECTION BREAK ===== */

/* 正在输入中三点弹跳动画（线上/线下/小剧场） */
.chat-typing-dots {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    vertical-align: middle;
    padding: 1px 2px;
}
.chat-typing-dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.4;
    display: inline-block;
    animation: chatDotBounce 1.2s infinite ease-in-out;
}
.chat-typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.chat-typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes chatDotBounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
    30% { transform: translateY(-5px); opacity: 1; }
}