/* 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; }

/* ---- v2.8.1：API 设置（地址提示 / 示例 / 模型列表） ---- */
.api-hint{font-size:12.5px;line-height:1.5;margin:-2px 6px 8px;color:var(--text-sub);word-break:break-all}
.api-hint:empty{display:none}
.api-hint.ok{color:color-mix(in srgb,var(--success) 62%,var(--theme-dark))}
.api-hint.warn{color:color-mix(in srgb,#e08a00 70%,var(--theme-dark))}
.api-hint.err{color:color-mix(in srgb,var(--danger) 75%,var(--theme-dark))}
.api-examples{margin:0 4px 6px}.api-examples>span{font-size:12px;color:var(--text-sub)}
#apiExamples{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
#apiExamples button{border:.5px solid var(--border-color);background:var(--card-bg);color:var(--theme-dark);border-radius:999px;padding:6px 12px;font-size:13px;cursor:pointer}
#apiExamples button:active{transform:scale(.96)}
.model-picker{margin:8px 0;background:var(--card-bg);border:.5px solid var(--border-color);border-radius:16px;padding:10px}
.model-picker .input-text{margin:0}
.mp-meta{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:8px 2px 4px;font-size:12px;color:var(--text-sub)}
.mp-meta label{display:flex;align-items:center;gap:4px;cursor:pointer;white-space:nowrap}
.mp-list{max-height:240px;overflow:auto;-webkit-overflow-scrolling:touch}
.mp-item{padding:10px;border-radius:10px;font-size:14px;line-height:1.35;word-break:break-all;cursor:pointer;color:var(--theme-dark)}
.mp-item:active{background:color-mix(in srgb,var(--theme-color) 16%,transparent)}
.mp-item.on{background:color-mix(in srgb,var(--theme-color) 24%,transparent);font-weight:600}
.mp-empty{padding:14px 6px;font-size:13px;color:var(--text-sub);text-align:center}