/* theme-nav.css —— 主题 app：大标题 + 子选项（由 theme-nav.js 在运行时整理，不改动原有控件和 id） */

/* ================= 让「气泡圆角 / 聊天字号」在所有聊天风格里都生效 =================
   iMessage / 液态玻璃原来把圆角和字号写死了；滑块动过以后才会设置 --bubble-radius-x / --chat-font-x，
   没动过就还是原来的 19 / 21 / 16。 */
#chatRoomApp.chat-ios.chat-imsg .bubble { border-radius: var(--bubble-radius-x, 19px); font-size: var(--chat-font-x, 16px); }
#chatRoomApp.chat-ios:not(.chat-imsg) .bubble { border-radius: var(--bubble-radius-x, 21px); }

/* ================= 页面骨架 ================= */
#themeApp .scroll-area.tn-on { padding: 0 0 40px; position: relative; scroll-behavior: smooth; }

/* ---------- 顶部预览（吸顶，可收起） ---------- */
#themeApp .tn-pv { position: sticky; top: 0; z-index: 30; padding: 8px 14px 10px; background: color-mix(in srgb, var(--bg-color, #f7f4f5) 90%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 6px 16px -10px rgba(0, 0, 0, .3); }
#themeApp .tn-pv-bar { display: flex; align-items: center; gap: 8px; margin: 0 2px 6px; min-height: 22px; }
#themeApp .tn-pv-t { font-size: 12px; font-weight: 600; letter-spacing: .5px; color: color-mix(in srgb, var(--text-sub, #9a9aa2) 66%, #3b3640); }
#themeApp .tn-pv-m { flex: 1; min-width: 0; font-size: 11px; color: var(--text-sub, #9a9aa2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#themeApp .tn-pv-x { flex: 0 0 auto; width: 26px; height: 22px; border: 0; background: transparent; padding: 0; display: grid; place-items: center; }
#themeApp .tn-pv-x i { width: 8px; height: 8px; border-right: 2px solid var(--text-sub, #9a9aa2); border-bottom: 2px solid var(--text-sub, #9a9aa2); transform: rotate(-135deg) translate(-1px, -1px); transition: transform .25s; }
#themeApp .tn-pv.min .tn-pv-x i { transform: rotate(45deg) translate(-1px, -1px); }
#themeApp .tn-pv.min .preview-chat { display: none; }

/* 预览 = 真实聊天的缩影：外观由 #chatRoomApp 规则的复制品决定（见 theme-nav.js），这里只管容器 */
#themeApp .tn-pv .preview-chat.tn-room { position: static; margin: 0; padding: 10px 12px; gap: 6px; border: 1px solid var(--border-color); box-shadow: none; border-radius: 16px; overflow: hidden; max-height: 210px; }
#themeApp .tn-pv .preview-chat.tn-room.chat-imsg { padding: 10px 16px; gap: 2px; }
#themeApp .tn-pv .preview-chat.tn-room .message { margin-top: 0; }
#themeApp .tn-pv .preview-chat.tn-room .avatar-small { transform: none; }
html.font-chat #tnRoom, html.font-chat #tnRoom *:not(svg):not(svg *) { font-family: var(--app-font) !important; }

/* ---------- 大标题卡片（和设置页同一套视觉） ---------- */
#themeApp .tn-list { padding: 12px 14px 0; display: flex; flex-direction: column; gap: 12px; }
#themeApp .tn-card { --c: var(--theme-color, #e79ab0); background: var(--card-bg, #fff); border: .5px solid var(--border-color, #ececf0); border-radius: 20px; box-shadow: 0 2px 14px rgba(120, 100, 110, .05); overflow: hidden; min-width: 0; box-sizing: border-box; }
#themeApp .tn-head { width: 100%; display: flex; align-items: center; gap: 12px; padding: 14px; margin: 0; border: 0; background: transparent; color: inherit; text-align: left; font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
#themeApp .tn-ic { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 13px; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 16%, var(--card-bg, #fff)); color: var(--c); }
#themeApp .tn-ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#themeApp .tn-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
#themeApp .tn-t { font-size: 15px; font-weight: 600; color: var(--theme-dark, #2a2a30); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#themeApp .tn-s { font-size: 12px; color: color-mix(in srgb, var(--text-sub, #9a9aa2) 70%, #3b3640); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#themeApp .tn-chev { flex: 0 0 auto; width: 9px; height: 9px; border-right: 2px solid var(--text-sub, #9a9aa2); border-bottom: 2px solid var(--text-sub, #9a9aa2); transform: rotate(-45deg); margin-right: 4px; transition: transform .28s; opacity: .7; }
#themeApp .tn-card.open > .tn-head .tn-chev { transform: rotate(45deg); }
#themeApp .tn-card.open > .tn-head .tn-ic { background: var(--c); color: #fff; }
#themeApp .tn-body { display: grid; grid-template-rows: 0fr; grid-template-columns: minmax(0, 1fr); transition: grid-template-rows .3s ease; }
#themeApp .tn-card.open > .tn-body { grid-template-rows: 1fr; }
#themeApp .tn-in { min-height: 0; min-width: 0; max-width: 100%; box-sizing: border-box; overflow: hidden; visibility: hidden; padding: 0 14px; transition: visibility 0s .3s, padding .3s; }
#themeApp .tn-card.open > .tn-body > .tn-in { visibility: visible; padding: 2px 14px 16px; transition: visibility 0s, padding .3s; overflow: visible; }
#themeApp .tn-in::before { content: ""; display: block; height: .5px; background: var(--border-color, #ececf0); margin: 0 0 14px; }

/* ---------- 子选项 ---------- */
#themeApp .tn-sub { margin: 0 0 20px; min-width: 0; }
#themeApp .tn-sub[hidden] { display: none; }
#themeApp .tn-sub:last-child { margin-bottom: 0; }
#themeApp .tn-sub-t { display: flex; align-items: center; gap: 7px; margin: 0 2px 9px; font-size: 13px; font-weight: 600; color: var(--theme-dark, #2a2a30); }
#themeApp .tn-sub-t::before { content: ""; width: 4px; height: 13px; border-radius: 2px; background: var(--c, var(--theme-color)); opacity: .85; }
#themeApp .tn-lab { margin: 2px 2px 6px; font-size: 12px; color: color-mix(in srgb, var(--text-sub, #9a9aa2) 66%, #3b3640); }
#themeApp .tn-src-title { display: none !important; }
#themeApp .tn-in .hint-line, #themeApp .tn-in .dd-tip { font-size: 12px; line-height: 1.65; margin: 6px 2px 0; color: color-mix(in srgb, var(--text-sub, #9a9aa2) 66%, #3b3640); opacity: 1; }
#themeApp .tn-in .cell-group { background: color-mix(in srgb, var(--bg-color, #f7f4f5) 62%, var(--card-bg, #fff)); border-radius: 14px; margin: 0 0 10px; overflow: visible; }
#themeApp .tn-in .btn-primary, #themeApp .tn-in .btn-secondary { margin: 0 0 8px; width: 100%; box-sizing: border-box; }
#themeApp .tn-in .btn-secondary:last-child { margin-bottom: 0; }
#themeApp .tn-in .input-text { background: var(--card-bg, #fff); }
#themeApp .tn-in > .tn-sub > *:last-child { margin-bottom: 0; }
#themeApp .tn-in > .tn-sub > .hint-line:last-child { margin-top: 6px; }
#themeApp .tn-in .sty-grid, #themeApp .tn-in .wallpaper-options, #themeApp .tn-in .theme-palette { margin-top: 0; }
#themeApp .tn-in .custom-color-row { margin: 10px 0 0; }
#themeApp .tn-in .lock-wp-preview { margin: 0 0 8px; }

/* 每一行：文字可换行，右侧控件不被挤出去 */
#themeApp .tn-in .cell-item, #themeApp .tn-in .ui-row { gap: 12px; min-width: 0; }
#themeApp .tn-in .cell-item > span:first-child, #themeApp .tn-in .ui-row > span:first-child { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; line-height: 1.45; }
#themeApp .tn-in .cell-item > select, #themeApp .tn-in .cell-item > input:not([type=checkbox]):not([type=range]) { flex: 0 1 52%; min-width: 0; max-width: 52%; text-overflow: ellipsis; }
#themeApp .tn-in .cell-item > input[type=range], #themeApp .tn-in .ui-row > input[type=range] { flex: 1 1 40%; min-width: 60px; max-width: 55%; }
#themeApp .tn-in .ios-switch, #themeApp .tn-in input[type=checkbox] { flex: 0 0 auto; }
#themeApp .tn-in select, #themeApp .tn-in input, #themeApp .tn-in textarea { max-width: 100%; }
#themeApp .tn-in > .tn-sub > *, #themeApp .tn-in > * { max-width: 100%; box-sizing: border-box; }

/* 分段按钮（聊天风格 / 头像显示方式 / 头像形状） */
#themeApp .tn-seg { display: flex; gap: 4px; padding: 3px; border-radius: 12px; background: color-mix(in srgb, var(--bg-color, #f7f4f5) 55%, var(--card-bg, #fff)); border: .5px solid var(--border-color, #ececf0); margin: 0 0 12px; }
#themeApp .tn-seg button { flex: 1 1 0; min-width: 0; padding: 8px 4px; border: 0; border-radius: 9px; background: transparent; color: inherit; font-size: 13px; line-height: 1.2; cursor: pointer; white-space: nowrap; }
#themeApp .tn-seg button.on { background: var(--theme-color, #e79ab0); color: var(--send-fg, #fff); font-weight: 600; box-shadow: 0 2px 8px color-mix(in srgb, var(--theme-color, #e79ab0) 35%, transparent); }
#themeApp .ui-row > .tn-seg { flex: 0 1 62%; margin: 0; }
#themeApp .tn-in #tnLook .ui-row { flex-wrap: wrap; }

/* 字体面板：已经在大标题里，不再自己套一层卡片 */
#themeApp .tn-in #fontPanel .xf-card { background: transparent; border: 0; box-shadow: none; padding: 0; }
#themeApp .tn-in #fontPanel { margin: 0; }

/* 设置页里的「外观已搬家」提示 */
#settingsApp .tn-moved { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; box-sizing: border-box; padding: 12px 14px; border: .5px dashed var(--border-color, #ddd); border-radius: 16px; background: transparent; color: var(--text-sub, #9a9aa2); font: inherit; font-size: 13px; text-align: left; cursor: pointer; }
#settingsApp .tn-moved i { font-style: normal; opacity: .6; }
#settingsApp .sx-chip[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) { #themeApp .tn-body, #themeApp .tn-chev, #themeApp .tn-in, #themeApp .tn-pv-x i { transition: none; } }