/* v2.8：字体 / 人设 / 翻译 / 语言 */
/* ---- 自定义字体：整个手机或只在聊天里 ---- */
html.font-all .phone, html.font-all .phone *:not(svg):not(svg *):not(.no-font) { font-family: var(--app-font) !important; }
html.font-chat #chatRoomApp, html.font-chat #chatRoomApp *:not(svg):not(svg *) { font-family: var(--app-font) !important; }
html.font-all .phone input, html.font-all .phone textarea, html.font-all .phone select, html.font-all .phone button { font-family: var(--app-font) !important; }

.xf-card { background: var(--card-bg, #fff); border: 1px solid var(--border-color, rgba(0,0,0,.08)); border-radius: 16px; padding: 12px 12px 6px; margin-bottom: 12px; }
.xf-prev { font-size: 16px; line-height: 1.7; padding: 10px 12px; border-radius: 12px; background: rgba(127,127,127,.08); color: var(--text-main, #333); margin-bottom: 10px; word-break: break-all; }
.xf-grp { margin-bottom: 10px; }
.xf-grp > b { display: block; font-size: 12px; color: var(--text-sub, #888); font-weight: 600; margin: 0 0 6px 2px; }
.xf-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.xf-chip { border: 1px solid var(--border-color, rgba(0,0,0,.12)); background: transparent; color: var(--text-main, #333); border-radius: 999px; padding: 5px 11px; font-size: 13px; cursor: pointer; position: relative; line-height: 1.3; }
.xf-chip.on { background: var(--theme-color, #e8a0b8); border-color: var(--theme-color, #e8a0b8); color: #fff; }
.xf-chip i { font-style: normal; margin-left: 6px; opacity: .7; padding: 0 2px; }
.xf-btns { display: flex; gap: 8px; margin: 4px 0 8px; flex-wrap: wrap; }

/* ---- 人设 ---- */
.x28-mask { position: absolute; inset: 0; z-index: 99980; background: rgba(0,0,0,.42); display: flex; align-items: flex-end; justify-content: center; }
.x28-sheet { width: 100%; max-height: 88%; overflow-y: auto; background: var(--card-bg, #fff); color: var(--text-main, #333); border-radius: 20px 20px 0 0; padding: 16px 16px 22px; box-sizing: border-box; -webkit-overflow-scrolling: touch; }
.x28-sheet h3 { margin: 0 0 10px; font-size: 16px; text-align: center; }
.x28-sheet > label { display: block; font-size: 12px; color: var(--text-sub, #888); margin: 10px 2px 4px; }
.x28-row { display: flex; align-items: center; gap: 8px; }
.x28-av { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; background: rgba(127,127,127,.12); display: flex; align-items: center; justify-content: center; font-size: 13px; flex: none; }
.x28-av img { width: 100%; height: 100%; object-fit: cover; }
.x28-chars { display: flex; flex-wrap: wrap; gap: 8px; }
.x28-chk { display: inline-flex !important; align-items: center; gap: 5px; font-size: 13px !important; color: var(--text-main, #333) !important; margin: 0 !important; padding: 4px 10px 4px 6px; border: 1px solid var(--border-color, rgba(0,0,0,.12)); border-radius: 999px; }
.x28-btns { display: flex; gap: 8px; margin-top: 16px; }
.x28-btns button { flex: 1; }
.x28-plist { margin-bottom: 8px; }
.x28-prow { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--border-color, rgba(0,0,0,.06)); cursor: pointer; }
.x28-prow .avatar-small { flex: none; width: 38px; height: 38px; overflow: hidden; }
.x28-pm { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.x28-pm b { font-size: 14px; color: var(--text-main, #333); }
.x28-pm b i { font-style: normal; font-size: 10px; margin-left: 6px; padding: 1px 6px; border-radius: 8px; background: var(--theme-color, #e8a0b8); color: #fff; font-weight: 400; }
.x28-pm small { font-size: 12px; color: var(--text-sub, #888); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.x28-pm .x28-use { color: var(--theme-color, #e8a0b8); }

/* ---- 翻译 ---- */
.tr-line { font-size: 12px; line-height: 1.5; color: var(--text-sub, #888); margin: 3px 4px 0; padding: 4px 8px; border-left: 2px solid var(--theme-color, #e8a0b8); background: rgba(127,127,127,.07); border-radius: 0 8px 8px 0; white-space: pre-wrap; word-break: break-word; }
.user-message .tr-line { text-align: left; }

/* ---- iCost 选角色 ---- */
.ic-pick { max-height: 46vh; overflow-y: auto; }
.ic-pk { display: flex; align-items: center; cursor: pointer; padding: 8px 2px; }