/* friends.css — 好友：朋友面板、聊天列表里的「新的朋友」、发起聊天弹窗顶部入口、「我」页一行（只在好友模式 .fr-on 下出现） */
.me-row[data-act="friends"] { display: none; }
.fr-on .me-row[data-act="friends"]:not([hidden]) { display: flex; }

.fr-row { display: flex; align-items: center; gap: 10px; width: calc(100% - 24px); margin: 0 12px 16px; padding: 12px 16px; border-radius: 18px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); color: var(--ink); text-align: left; }
.fr-row[hidden] { display: none; }
.fr-row > svg { flex: none; color: var(--clay-d); }
.fr-row > span { flex: 1; font-family: var(--font-display); font-weight: 600; font-size: 15px; }
.fr-row-n { flex: none; min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box; border-radius: 10px; background: var(--clay); color: #fff; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }

.fr-entry { display: flex; align-items: center; gap: 10px; width: 100%; margin: 0 0 12px; padding: 12px 14px; border-radius: 14px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink-2); font-size: 15px; }
.fr-entry > span { flex: 1; text-align: left; }
.fr-entry > svg { color: var(--clay-d); }

.fr-root { display: flex; flex-direction: column; gap: 18px; padding-bottom: 8px; }
.fr-search { display: flex; align-items: center; gap: 8px; padding: 5px 5px 5px 14px; border-radius: 16px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.fr-search:focus-within { box-shadow: inset 0 0 0 1.5px var(--clay); }
.fr-at { color: var(--muted); font-family: var(--font-display); font-size: 17px; }
.fr-q { flex: 1; min-width: 0; height: 38px; border: 0; background: none; font: inherit; font-size: 16px; color: var(--ink); outline: none; }
.fr-q::-webkit-search-cancel-button { display: none; }
.ui-btn.fr-go, .ui-btn.fr-primary { background: var(--clay); color: #fff; }
.ui-btn.fr-primary:disabled { opacity: .5; }

.fr-result:empty { display: none; }
.fr-card { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 20px; background: var(--surface) repeating-linear-gradient(180deg, transparent 0 31px, var(--rule) 31px 32px); box-shadow: 0 0 0 1px var(--line); }
.fr-card .ui-avatar > .ui-char { --size: 44px; }
.fr-card-t, .fr-item-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fr-card-t b { font-family: var(--font-display); font-size: 18px; font-weight: 600; color: var(--ink); }
.fr-card-t span, .fr-item-t span { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fr-card-t i { font-style: normal; font-size: 13px; color: var(--ink-2); }
.fr-card-act { flex: none; }
.fr-say { display: flex; gap: 8px; margin-top: 10px; }
.fr-msg { flex: 1; min-width: 0; height: 40px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); font: inherit; font-size: 15px; color: var(--ink); }
.fr-msg:focus { outline: none; border-color: var(--clay); }
.fr-miss { margin: 0; padding: 14px; text-align: center; font-size: 14px; color: var(--muted); }
.fr-state { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; color: var(--muted); white-space: nowrap; }

.fr-h { margin: 0 0 8px; font-size: 12px; letter-spacing: 2px; color: var(--muted); font-weight: 600; }
.fr-sec[hidden] { display: none; }
.fr-list { border-radius: 18px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); overflow: hidden; }
.fr-list:empty { display: none; }
.fr-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; }
.fr-item + .fr-item { border-top: 1px solid var(--line-2); }
.fr-item-go { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; text-align: left; color: inherit; }
.fr-item-t b { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--ink); }
.fr-item-a { flex: none; display: flex; align-items: center; gap: 6px; }
.fr-empty { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.6; }
.fr-empty[hidden] { display: none; }
.fr-me { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: 16px; background: var(--surface-2); font-size: 13.5px; color: var(--ink-2); }
.fr-handle { font-family: var(--font-display); color: var(--ink); }

/* 举报 */
.fr-report { display: flex; flex-direction: column; gap: 12px; }
.fr-report-t { margin: 0; font-size: 13px; color: var(--muted); }
.fr-reasons { display: flex; flex-wrap: wrap; gap: 8px; }
.fr-reason input { position: absolute; opacity: 0; pointer-events: none; }
.fr-reason span { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 18px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; color: var(--ink-2); cursor: pointer; }
.fr-reason input:checked + span { box-shadow: inset 0 0 0 1.5px var(--clay); color: var(--clay-d); background: var(--clay-soft); }
.fr-reason input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.fr-detail { width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); font: inherit; font-size: 15px; color: var(--ink); resize: none; }

/* 拼贴：谁可以看 */
.mo-vis { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 10px; border-radius: 15px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); font-size: 12.5px; color: var(--ink-2); }
.mo-vis[hidden] { display: none; }
.mo-vis.is-narrow { color: var(--clay-d); box-shadow: inset 0 0 0 1px rgba(217, 119, 87, .45); }
.mo-vis-tag { display: inline-flex; align-items: center; gap: 3px; margin-left: 8px; font-size: 11.5px; color: var(--clay-d); }
.mo-vsheet { display: flex; flex-direction: column; gap: 8px; }
.mo-vopt { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; }
.mo-vopt input { accent-color: var(--clay); width: 18px; height: 18px; flex: none; }
.mo-vopt span { display: flex; flex-direction: column; gap: 2px; }
.mo-vopt b { font-family: var(--font-display); font-weight: 600; font-size: 15px; color: var(--ink); }
.mo-vopt i { font-style: normal; font-size: 12px; color: var(--muted); }
.mo-vopt:has(input:checked) { box-shadow: inset 0 0 0 1.5px var(--clay); }
.mo-vpick { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 4px 8px 44px; }
.mo-vpick[hidden] { display: none; }
.mo-vfr { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px 0 8px; border-radius: 18px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); font-size: 13.5px; cursor: pointer; }
.mo-vfr input { accent-color: var(--clay); }
.mo-vfr .ui-char { --size: 20px; }
.mo-vnone { margin: 0; font-size: 13px; color: var(--muted); }
.mo-vdef { display: flex; align-items: center; gap: 8px; padding: 6px 4px; font-size: 13px; color: var(--ink-2); }
.mo-vdef input { accent-color: var(--clay); }
.ui-btn.mo-vok { background: var(--clay); color: #fff; margin-top: 4px; }
.mo-compose { position: relative; }
.mo-compose .mo-vis { position: absolute; top: 12px; right: 12px; z-index: 1; }

/* 底栏「朋友」：只在好友模式下出现 */
html:not(.fr-on) .app-tab[data-tab="friends"] { display: none; }

/* 朋友页（底栏「朋友」） */
.fr-screen { position: absolute; inset: 0; display: flex; flex-direction: column; background: var(--bg); }
.fr-scroll { flex: 1; min-height: 0; overflow-y: auto; }
.fr-screen .fr-root { padding: max(14px, env(safe-area-inset-top)) 16px 28px; }
.fr-top { display: flex; align-items: center; justify-content: space-between; padding: 30px 2px 0 6px; }
.fr-top .ui-title-lg { margin: 0; }
.fr-gh { display: flex; align-items: center; justify-content: space-between; }
.fr-gh i { font-style: normal; font-weight: 400; color: var(--muted); letter-spacing: 0; margin-left: 4px; }
.fr-gedit { font-size: 12px; color: var(--clay-d); letter-spacing: 0; font-weight: 500; padding: 4px 2px; }
.fr-heart, .fr-heart svg { color: var(--clay); vertical-align: -1px; }
.fr-none[hidden] { display: none; }
.fr-gform { display: flex; flex-direction: column; gap: 12px; }
.fr-gname { height: 44px; padding: 0 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); font: inherit; font-size: 16px; color: var(--ink); }
.fr-gname:focus { outline: none; border-color: var(--clay); }
.fr-gpick { display: flex; flex-wrap: wrap; gap: 8px; }
.mo-vgroups { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 2px; font-size: 12px; color: var(--muted); }
.mo-vg { height: 28px; padding: 0 12px; border-radius: 14px; background: var(--clay-soft); color: var(--clay-d); font-size: 12.5px; }

/* 特别提醒的横幅：陶土色描边 + 轻轻一跳 */
.ui-banner.is-alert { box-shadow: 0 0 0 1.5px var(--clay), 0 14px 34px rgba(184, 92, 62, .22); }
.ui-banner.is-alert .ui-banner-title::after { content: '特别提醒'; margin-left: 8px; padding: 1px 6px; border-radius: 6px; background: var(--clay); color: #fff; font-size: 10px; font-weight: 700; vertical-align: 2px; }

/* 对话页：「换色」下面的「设置」 */
.ct-head-title { padding-right: 104px; }
.ct-head-title .ct-set { position: absolute; top: 4px; right: 14px; margin: 0; pointer-events: auto; }
.ct-root.is-gone .ct-set { visibility: visible; pointer-events: auto; }

/* 聊天设置面板 */
.cs-root { display: flex; flex-direction: column; gap: 14px; padding-bottom: 6px; }
.cs-who { display: flex; align-items: center; gap: 14px; padding: 4px 4px 2px; }
.cs-who .ui-avatar > .ui-char { --size: 40px; }
.cs-who-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cs-who-t b { font-family: var(--font-display); font-size: 19px; font-weight: 600; color: var(--ink); }
.cs-who-t span { font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-group { border-radius: 18px; background: var(--surface); box-shadow: 0 0 0 1px var(--line); overflow: hidden; }
.cs-row { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 8px 14px; box-sizing: border-box; text-align: left; color: var(--ink); font-size: 15px; }
.cs-row + .cs-row { border-top: 1px solid var(--line-2); }
.cs-row > svg:first-child { flex: none; color: var(--ink-2); }
.cs-l { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cs-l small { font-size: 11.5px; color: var(--muted); }
.cs-v { flex: none; max-width: 45%; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cs-go { flex: none; color: var(--muted); }
.cs-row.is-danger, .cs-row.is-danger > svg:first-child { color: var(--danger, #C0412F); }
.cs-search { display: flex; flex-direction: column; gap: 10px; }
.cs-q { height: 44px; padding: 0 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); font: inherit; font-size: 16px; color: var(--ink); }
.cs-q:focus { outline: none; border-color: var(--clay); }
.cs-res { display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow-y: auto; }
.cs-hit { display: grid; grid-template-columns: auto 1fr auto; gap: 4px 10px; align-items: baseline; padding: 10px 12px; border-radius: 14px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); text-align: left; color: var(--ink); }
.cs-hit b { font-size: 12.5px; color: var(--ink-2); }
.cs-hit span { font-size: 14px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cs-hit time { font-size: 11px; color: var(--muted); }
.cs-hit mark { background: var(--clay-soft); color: var(--clay-d); border-radius: 3px; padding: 0 1px; }
.cs-hint { margin: 6px 0; text-align: center; font-size: 13px; color: var(--muted); }
.cs-more[hidden] { display: none; }

/* 聊天背景（每段对话各自记在本机） */
.app-view.ct-root.bg-plain { background: var(--surface); }
.app-view.ct-root.bg-grid { background: var(--surface) repeating-linear-gradient(0deg, transparent 0 23px, var(--rule) 23px 24px), repeating-linear-gradient(90deg, transparent 0 23px, var(--rule) 23px 24px); background-blend-mode: normal; }
.app-view.ct-root.bg-dots { background-color: var(--surface); background-image: radial-gradient(rgba(217, 119, 87, .16) 1px, transparent 1.4px); background-size: 18px 18px; }
.app-view.ct-root.bg-warm { background: linear-gradient(180deg, color-mix(in srgb, var(--clay-soft) 55%, var(--surface)), var(--surface) 70%); }
.fr-groups { display: flex; flex-direction: column; gap: 18px; }
.fr-groups:empty { display: none; }
html:not(.fr-full) .fr-top [data-act="newgroup"] { display: none; }