/* AndCo —— 方向 B「周日」：番茄红、奶油黄、深靛墨，AI 用淡紫；贴纸 = 墨边 + 硬阴影。
   跟官网（home.css）、App（ios/AndCo/Theme.swift）同一套色。列表和设置页安静（纸面：奶油底、细线），群聊热闹（贴纸：番茄红顶栏、墨边气泡）。
   硬阴影只给"可以摸的东西"（按钮）和群聊气泡。设计 docs/plans/2026-10-02-web-redesign.md */
:root {
  --paper: #FFF3D6; --paper-2: #FFFFFF; --paper-3: #F7E7C4;          /* 页面底 / 卡片、输入框、人的气泡 / 再深一层（悬停） */
  --ink: #1B1035; --ink-2: #3E3358; --ink-3: #5B5076;                /* 正文 / 次一档 / 时间、预览、主人名（对比度 > 6:1） */
  --line: #EBDDBE; --edge: #1B1035; --shadow-c: #1B1035;             /* 分隔线 / 贴纸墨边 / 硬阴影 */
  --amp: #FF5A36; --amp-text: #C2361A; --amp-soft: #FFE0D6;          /* 番茄红只当底色，上面放墨字；要当字用的红是 amp-text */
  --butter: #FFE27A; --lilac: #D8CCFF; --cream: #FFF3D6; --ink-fixed: #1B1035;
  --ai: #4B3A9E; --ai-soft: #D8CCFF; --ai-edge: #1B1035;             /* AI 的字 / AI 的气泡和头像底（淡紫只给 AI） */
  --accent: #1B1035;                                                  /* 链接、勾选 */
  --pri-bg: #1B1035; --pri-fg: #FFFFFF; --pri-shadow: #FFE27A;       /* 主按钮：墨底白字奶油黄影子 */
  --mine-shadow: #1B1035;                                             /* 自己的气泡的影子（夜间换番茄红） */
  --chat-bar: #FF5A36; --chat-bar-fg: #1B1035; --chat-bar-edge: 2px solid #1B1035;
  --mark-bg: #1B1035; --mark-fg: #FFE27A;                             /* & 贴纸：白天墨底黄字，夜间反过来 */
  --focus: #FFE27A; --tint: rgba(27,16,53,.07);
  --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B1035' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");   /* 下拉框的小箭头 */
  --ok: #2F7D4E; --warn: #9A6A12;
  --display: 'Bricolage Grotesque', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', system-ui, sans-serif;
  --sans: 'Figtree', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', system-ui, -apple-system, sans-serif;
  --serif: var(--display); --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --r: 20px; --shadow: 4px 4px 0 var(--shadow-c);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root { --paper: #1B1035; --paper-2: #2A1F4D; --paper-3: #33275A; --ink: #FFF3D6; --ink-2: #D6CDEB; --ink-3: #BDB2D6;
    --line: #2E2352; --edge: #4D4078; --shadow-c: #0B0619; --amp-text: #FF8466; --amp-soft: #4A2430;
    --ai: #D8CCFF; --ai-soft: #3D3170; --ai-edge: #7A69C2; --accent: #FFE27A;
    --pri-bg: #FFE27A; --pri-fg: #1B1035; --pri-shadow: #0B0619; --mine-shadow: #FF5A36;
    --chat-bar: #2A1F4D; --chat-bar-fg: #FFF3D6; --chat-bar-edge: 3px solid #FF5A36;
    --mark-bg: #FFE27A; --mark-fg: #1B1035; --focus: rgba(255,226,122,.45); --tint: rgba(255,243,214,.08);
    --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFF3D6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    --ok: #7FC08D; --warn: #E0B65A; color-scheme: dark; }
}
* { box-sizing: border-box }
html, body { height: 100% }
body { margin: 0; background: var(--paper); color: var(--ink); font: 15px/1.5 var(--sans); -webkit-font-smoothing: antialiased }
a { color: inherit; text-decoration: none }
button, input, textarea, select { font: inherit; color: inherit }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px }

/* 按钮：默认是白底墨边的小胶囊；主按钮、番茄红按钮是贴纸，带硬阴影，按下去影子收回 */
button { cursor: pointer; border: 1.5px solid var(--edge); background: var(--paper-2); color: var(--ink); border-radius: 999px; padding: 7px 15px; font-weight: 700; white-space: nowrap; transition: transform .1s, box-shadow .1s, background .15s }
button:hover { background: var(--paper-3) }
button.primary, button.amp, button.butter, button.danger { border: 2px solid var(--ink-fixed); box-shadow: 3px 3px 0 var(--shadow-c) }
button.primary { background: var(--pri-bg); color: var(--pri-fg); border-color: var(--pri-bg); box-shadow: 3px 3px 0 var(--pri-shadow) }
button.amp, button.danger { background: var(--amp); color: var(--ink-fixed) }
button.butter { background: var(--butter); color: var(--ink-fixed) }
button.primary:hover, button.amp:hover, button.butter:hover, button.danger:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--shadow-c) }
button.primary:hover { box-shadow: 4px 4px 0 var(--pri-shadow); background: var(--pri-bg) } button.amp:hover, button.danger:hover { background: var(--amp) } button.butter:hover { background: var(--butter) }
button.primary:active, button.amp:active, button.butter:active, button.danger:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--shadow-c) }
button.ghost { background: transparent; border-color: transparent; box-shadow: none } button.ghost:hover { background: var(--tint) }
button.small { padding: 4px 12px; font-size: 13px }
button:disabled, button:disabled:hover { opacity: .45; cursor: default; transform: none }
input, textarea, select { background: var(--paper-2); border: 1.5px solid var(--edge); border-radius: 12px; padding: 9px 12px; width: 100%; outline: none }
input::placeholder, textarea::placeholder { color: var(--ink-3) }
input:focus, textarea:focus, select:focus { box-shadow: 0 0 0 3px var(--focus) }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: none }   /* 输入类的聚焦只用上面那圈奶油黄，不再叠一个方框（输入框一点就算 focus-visible） */
input[type=checkbox]:focus-visible, input[type=radio]:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px }   /* 勾选框没有那圈，键盘走到时照旧给方框 */
/* 下拉框：不用系统自带的箭头（贴着边框、深浅色不跟），换成自己的，右边留出位置 */
select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 42px; background-image: var(--chev); background-repeat: no-repeat; background-position: right 14px center; background-size: 14px 14px; text-overflow: ellipsis }
.row > select:not(.att) { flex: 1 1 auto; min-width: 0 }   /* 跟按钮一行时由它让位，按钮不被挤出去 */
input[type=checkbox], input[type=radio] { width: auto; padding: 0; margin: 0; flex: none; accent-color: var(--accent) }   /* 勾选框不跟着输入框占满整行，不然旁边的字被挤成一字一行 */
textarea { resize: none; line-height: 1.45 }
code, .mono { font-family: var(--mono); font-size: 13px }
h1, h2, h3 { font-family: var(--display); font-weight: 800; letter-spacing: -.03em; margin: 0 }
h1 { font-size: 34px; line-height: 1.1; letter-spacing: -.04em } h2 { font-size: 22px } h3 { font-size: 17px }
/* & 贴纸：墨圆底 + 奶油黄 &，歪 8 度。字号跟着周围走 */
.amp-mark { display: inline-grid; place-items: center; flex: none; width: 1.56em; height: 1.56em; font-size: .72em; border-radius: 50%; background: var(--mark-bg); color: var(--mark-fg);
  font-family: var(--display); font-weight: 800; line-height: 1; transform: rotate(-8deg); vertical-align: -.2em; margin: 0 .25em; font-style: normal }
.muted { color: var(--ink-2) } .faint { color: var(--ink-3); font-size: 13px } .tiny { font-size: 12px }
.row { display: flex; align-items: center; gap: 8px } .col { display: flex; flex-direction: column; gap: 8px } .grow { flex: 1; min-width: 0 } .wrap { flex-wrap: wrap }
.card { background: var(--paper-2); border: 1.5px solid var(--line); border-radius: var(--r); padding: 16px }
.hr { height: 1.5px; background: var(--line); margin: 14px 0 }
.pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 800; background: var(--paper-3); color: var(--ink-2); white-space: nowrap; flex: none }
.pill.ai { background: var(--ai-soft); color: var(--ai) } .pill.amp { background: var(--amp-soft); color: var(--amp-text) } .pill.open { background: var(--paper-2); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--edge) }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-3); display: inline-block } .dot.on { background: var(--ok) } .dot.reach { background: var(--ai) }

/* 头像：人圆（按名字在白 / 奶油黄 / 奶油里挑一个，跟 App 一样）、AI 圆角方淡紫，都是墨边；字一直是墨色 */
.av { width: 34px; height: 34px; flex: none; display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: 15px; background: #FFFFFF; color: var(--ink-fixed); border: 1.5px solid var(--edge); text-transform: uppercase; overflow: hidden }
.av.account { border-radius: 50% } .av.c1 { background: var(--butter) } .av.c2 { background: var(--cream) }
.av.agent { border-radius: 30%; background: var(--lilac) }
.av.sm { width: 26px; height: 26px; font-size: 12px } .av.lg { width: 64px; height: 64px; font-size: 28px; border-width: 2px } .av.xl { width: 96px; height: 96px; font-size: 40px; border-width: 2px }
/* 群的头像：圆角方、奶油黄、墨边 */
.gav { width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 29%; background: var(--butter); color: var(--ink-fixed); border: 1.5px solid var(--edge); font-family: var(--display); font-weight: 800; font-size: 14px; line-height: 1 }
.gav.lg { width: 44px; height: 44px; font-size: 19px; border-width: 2px; box-shadow: 3px 3px 0 var(--shadow-c) } .gav.md { width: 48px; height: 48px; font-size: 20px }
.ico { display: inline-grid; place-items: center; flex: none } .ico svg { display: block }

/* ---------- 壳 ---------- */
#app { height: 100%; }
.shell { display: grid; grid-template-columns: 264px minmax(0, 1fr) 280px; height: 100%; }
.side { border-right: 1.5px solid var(--line); display: flex; flex-direction: column; min-height: 0; background: var(--paper) }
.side.right { border-right: 0; border-left: 1.5px solid var(--line) }
.side .scroll { overflow: auto; padding: 6px 12px 12px; flex: 1 }
.brand { display: flex; align-items: center; gap: 10px; padding: 22px 20px 14px; font-family: var(--display); font-weight: 800; font-size: 26px; letter-spacing: -.045em; line-height: 1 }
.brand .amp-mark { width: 34px; height: 34px; font-size: 21px; margin: 0; vertical-align: 0 }
.nav { display: flex; flex-direction: column; gap: 2px }
.nav a { display: flex; align-items: center; gap: 12px; padding: 7px 10px; border: 1.5px solid transparent; border-radius: 12px; font-weight: 600; transition: background .15s }
.nav a:hover { background: var(--tint) } .nav a.active { background: var(--paper-2); border-color: var(--edge); font-weight: 800 }
.nav .badge, .item .badge { margin-left: auto; min-width: 22px; height: 22px; padding: 0 6px; display: inline-grid; place-items: center; border-radius: 999px; background: var(--amp); color: var(--ink-fixed); border: 1.5px solid var(--ink-fixed); font-size: 12px; font-weight: 800; line-height: 1 }
.sect { display: flex; align-items: center; justify-content: space-between; padding: 16px 10px 6px; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3) }
.sect button { width: 28px; height: 28px; padding: 0; display: grid; place-items: center; font-size: 19px; font-weight: 600; line-height: 1; border: 0; border-radius: 50%; background: none; color: var(--ink-3); margin-right: -6px; box-shadow: none } .sect button:hover { color: var(--ink); background: var(--tint) }
.me { padding: 12px 14px; border-top: 1.5px solid var(--line) } .me-row { display: flex; align-items: center; gap: 10px } .me-name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis } .me-handle { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12.5px }
.me-acts { display: flex; gap: 2px; flex: none } .ib { width: 32px; height: 32px; padding: 0; display: grid; place-items: center; border-radius: 50%; font-size: 15px; color: var(--ink-3) } .ib.lang { width: auto; padding: 0 9px; font-size: 12px; font-weight: 800; letter-spacing: .02em; border: 1.5px solid var(--line); border-radius: 999px }
.main { display: flex; flex-direction: column; min-height: 0; min-width: 0 }
/* 顶栏：别的页是纸面（奶油底、细线、粗标题）；群聊和私信是贴纸（番茄红底、墨边） */
.topbar { display: flex; align-items: center; gap: 12px; padding: 14px 24px; border-bottom: 1.5px solid var(--line); min-height: 68px }
.topbar h2 { font-size: 26px; line-height: 1.15; letter-spacing: -.04em; overflow-wrap: anywhere } .topbar .desc { color: var(--ink-3); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px }
.topbar.chat { background: var(--chat-bar); color: var(--chat-bar-fg); border-bottom: var(--chat-bar-edge); padding: 14px 24px; gap: 14px }
.topbar.chat h2 { font-size: 23px; letter-spacing: -.03em } .topbar.chat .desc { color: var(--chat-bar-fg); font-weight: 700; opacity: .85 }   /* 灰字不上番茄红 */
.topbar.chat button.ghost { color: var(--chat-bar-fg) }
.topbar.chat select.att { background-color: var(--paper-2); color: var(--ink); border: 2px solid var(--ink-fixed); box-shadow: 2px 2px 0 var(--shadow-c); font-weight: 700; padding: 5px 30px 5px 12px; font-size: 13px; background-position: right 11px center }
.topbar .lead { flex: none; display: grid }
.topbar .lead .av { width: 44px; height: 44px; font-size: 19px; border-width: 2px; box-shadow: 3px 3px 0 var(--shadow-c) }
.topbar .waves { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 800 } .waves .wlbl { white-space: nowrap } .waves .wstack { display: flex } .waves .wav .av { width: 26px; height: 26px; font-size: 11px; border-width: 2px } .waves .wav + .wav { margin-left: -6px }
/* 手机上的两个圆钮：打开列表 / 成员 */
.hamburger, .members-btn { display: none; width: 44px; height: 44px; padding: 0; place-items: center; flex: none; border: 2px solid var(--ink-fixed); border-radius: 50%; background: var(--paper-2); box-shadow: 3px 3px 0 var(--shadow-c) }
.topbar.chat .members-btn { background: var(--butter); color: var(--ink-fixed) }
.topbar:not(.chat) .hamburger { border-width: 1.5px; box-shadow: none; width: 40px; height: 40px }
/* 中间那块：切页时换掉的就是它。换了页淡入；等数据时变淡、顶上走一条细进度条 */
.view { flex: 1; min-height: 0; display: flex; flex-direction: column }
.view.fresh { animation: viewin .16s ease-out both } @keyframes viewin { from { opacity: 0 } }
.main { position: relative } .main.loading .view { opacity: .5; pointer-events: none; transition: opacity .2s }
.main.loading::before { content: ''; position: absolute; z-index: 3; top: 0; left: 0; height: 3px; width: 30%; background: var(--amp); animation: loadbar 1s ease-in-out infinite }
@keyframes loadbar { from { transform: translateX(-100%) } to { transform: translateX(340%) } }
@media (min-width: 901px) { .shell.no-right { grid-template-columns: 264px minmax(0, 1fr) } .shell.no-right > .side.right { display: none } }   /* 手机上本来就是一栏，别被它盖掉 */
.page { overflow: auto; padding: 26px 32px 40px; max-width: 800px; width: 100%; margin: 0 auto }
.page.wide { max-width: 1000px }

/* ---------- 聊天：气泡是贴纸。人白、AI 淡紫、自己奶油黄靠右 ---------- */
.msgs { flex: 1; overflow: auto; overflow-anchor: none; padding: 16px 32px 12px; display: flex; flex-direction: column }
.msg { display: flex; align-items: flex-start; gap: 10px; padding: 10px 4px 2px; position: relative; font-size: 15.5px }
.msg.cont { padding-top: 5px }
.msg > .avl { flex: none; width: 36px; display: block } .msg > .avl .av { width: 36px; height: 36px; border-width: 2px } .msg.cont > .avl .av { display: none }
.msg .mcol { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; max-width: min(600px, 82%) }
.msg.mine { flex-direction: row-reverse } .msg.mine .mcol { align-items: flex-end }
.msg .head { display: flex; align-items: center; gap: 6px; font-size: 13px; padding: 0 4px; flex-wrap: wrap } .msg .name { font-weight: 800 } .msg .name.ai { color: var(--ai) }
.msg .owner { display: inline-flex; align-items: center; color: var(--ink-3); font-weight: 600 } .msg .owner .amp-mark { margin: 0 5px 0 0; font-size: 10px } .msg .time { color: var(--ink-3); font-size: 12px; margin-left: 2px }
.bubble { background: var(--paper-2); color: var(--ink); border: 2px solid var(--edge); border-radius: 6px 18px 18px 18px; padding: 9px 14px; box-shadow: 3px 3px 0 var(--shadow-c); max-width: 100%; min-width: 0; display: flex; flex-direction: column }
.msg.ai .bubble { background: var(--ai-soft); border-color: var(--ai-edge) }
.msg.mine .bubble { background: var(--butter); color: var(--ink-fixed); border-color: var(--ink-fixed); border-radius: 18px 6px 18px 18px; box-shadow: 3px 3px 0 var(--mine-shadow) }
.msg .body { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5 }
.msg .body .mention { font-weight: 800; background: var(--butter); color: var(--ink-fixed); border-radius: 6px; padding: 0 3px }
.msg.mine .body .mention { background: #FFFFFF }
.msg .body a[target] { text-underline-offset: 2px }
.msg .body.clamp { max-height: 10.5em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent) }
.msg .unfold { align-self: flex-start; margin-top: 6px; padding: 3px 11px; font-size: 13px; font-weight: 800; background: var(--paper-2); border: 1.5px solid var(--edge); color: var(--ink) } .msg .unfold:hover { background: var(--paper-3) }
.msg .quote { display: block; margin: 0 -6px 6px; padding: 5px 9px; border-radius: 10px; background: var(--tint); font-size: 13px; line-height: 1.35; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; max-width: 420px }
.msg .quote::before { content: '↩ '; font-weight: 800; color: var(--ink) } .msg .quote b { color: var(--ink) }
.msg.mine .quote { background: rgba(27,16,53,.08); color: #5B5076 } .msg.mine .quote b, .msg.mine .quote::before { color: var(--ink-fixed) }
.msg img.sticker { display: block; width: 150px; height: auto; -webkit-user-drag: none }   /* 表情包：自带白边，不加气泡和阴影 */
.msg .quote.solo { margin: 0 0 2px; background: var(--paper-2); border: 1.5px solid var(--line) }
/* 发表情包的面板：从输入栏上方弹出，一格一张 */
.composer { position: relative }
.sticker-sheet { position: absolute; left: 24px; right: 24px; bottom: calc(100% - 4px); z-index: 6; display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 4px; max-height: min(340px, 50vh); overflow-y: auto;
  padding: 10px; background: var(--paper-2); border: 2px solid var(--edge); border-radius: 20px; box-shadow: 4px 4px 0 var(--shadow-c); animation: rise .18s both }
.sticker-sheet .st { padding: 4px; border: 0; border-radius: 14px; background: transparent; box-shadow: none; aspect-ratio: 1 } .sticker-sheet .st:hover { background: var(--tint) }
.sticker-sheet .st img { display: block; width: 100%; height: 100% }
.msg img.attach { max-width: min(360px, 100%); border-radius: 14px; border: 2px solid var(--edge); box-shadow: 3px 3px 0 var(--shadow-c); display: block }
.msg .letters { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-top: 2px }   /* 留言：留给还没来过的 AI */
.msg .letter { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; padding: 3px 6px 3px 11px; border: 1.5px dashed var(--ink-3); border-radius: 999px } .msg .letter b { font-weight: 800 } .msg .letter .lw { color: var(--ink-3) }
.msg .letter button { height: 24px; padding: 0 10px; font-size: 12px; font-weight: 800; border-width: 1.5px; box-shadow: 2px 2px 0 var(--shadow-c) }
.msg .rx { display: flex; gap: 6px; margin-top: 2px; flex-wrap: wrap } .rx button { height: 28px; padding: 0 10px; font-size: 13px; font-weight: 700; background: var(--paper-2) } .rx button.mine { background: var(--butter); color: var(--ink-fixed); border-color: var(--ink-fixed) }
/* 那排动作（表情、回复、举报、撤回）：窄的时候浮在气泡上方；聊天区够宽时挪到气泡旁边，气泡相应收窄一点给它留位置 */
.msgs { container-type: inline-size } .msg .mcol { position: relative }
.msg .tools { position: absolute; left: 0; bottom: 100%; margin-bottom: 4px; display: none; gap: 2px; background: var(--paper-2); border: 1.5px solid var(--edge); border-radius: 999px; padding: 2px 4px; box-shadow: 2px 2px 0 var(--shadow-c); z-index: 2; white-space: nowrap }
.msg.mine .tools { left: auto; right: 0 }
@container (min-width: 720px) {
  .msg .mcol { max-width: min(580px, calc(100% - 270px)) }
  .msg .tools { bottom: 0; left: 100%; margin: 0 0 0 10px } .msg.mine .tools { left: auto; right: 100%; margin: 0 10px 0 0 }
}
.msg:hover .tools, .msg.show-tools .tools { display: flex } .tools button { border: 0; background: none; padding: 2px 7px; font-size: 13px; font-weight: 600; border-radius: 999px; box-shadow: none } .tools button:hover { background: var(--tint) } .tools button.takeback { color: var(--amp-text); font-size: 12px; font-weight: 800 }
.tag { font-size: 11.5px; font-weight: 800; padding: 1px 7px; border-radius: 999px; background: var(--amp-soft); color: var(--amp-text) }
.msg.deleted { justify-content: center; padding: 6px 0 } .msg.deleted > div:first-child { display: none } .msg.deleted .body { color: var(--ink-3); font-style: italic; font-size: 13px; text-align: center }
.msg.deleted .reedit { border: 0; background: none; padding: 6px 4px 6px 8px; margin: -6px 0; border-radius: 4px; font-style: normal; font-weight: 700; color: var(--amp-text) } .msg.deleted .reedit:hover { background: none; text-decoration: underline }
.notice { padding: 9px 24px; border-bottom: 1.5px solid var(--line); background: var(--paper-2); font-size: 14px; cursor: pointer; display: flex; gap: 10px; align-items: baseline; line-height: 1.5 }
.notice .ntag { flex: none; font-size: 12px; font-weight: 800; padding: 0 8px; border-radius: 6px; background: var(--butter); color: var(--ink-fixed); border: 1.5px solid var(--ink-fixed); white-space: nowrap } .notice .txt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0 } .notice.open .txt { white-space: pre-wrap; overflow: visible }
.msg.hl { background: var(--amp-soft); border-radius: 16px }
.msg.enter { animation: msgin .22s cubic-bezier(.2,.8,.2,1) both } @keyframes msgin { from { opacity: 0; transform: translateY(8px) } }   /* 实时新来的那条 */
.fold { margin: 8px 0 4px 46px; font-size: 12.5px; font-weight: 700; color: var(--ai); cursor: pointer; display: flex; align-items: center; gap: 8px } .fold::before, .fold::after { content: ''; flex: 1; height: 1.5px; background: var(--ai-soft) }
/* AI 群管理员：成员名旁的小标、群里的系统提示、群设置里的改动记录 */
.member .aiadm { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 999px; font-size: 10.5px; font-weight: 800; line-height: 1.6; vertical-align: 1px; background: var(--ai-soft); color: var(--ai); cursor: pointer }
.guest-note.sysline { padding: 6px 12px }
.edit-row { padding: 6px 0; border-bottom: 1px solid var(--line) } .edit-row .sub { font-size: 12.5px; color: var(--ink-3) } .edit-row .val { font-size: 13.5px; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 4.2em; overflow: hidden }
.guest-note { align-self: center; text-align: center; font-size: 12.5px; color: var(--ink-3); padding: 8px 12px } .guest-note button { border: 0; background: none; padding: 4px 6px; margin-left: 4px; font-size: 12.5px; font-weight: 700; color: var(--amp-text) } .guest-note button:hover { background: none; text-decoration: underline }
.daysep { align-self: center; margin: 16px 0 6px; padding: 3px 12px; font-size: 12px; font-weight: 800; background: var(--paper-2); border: 2px solid var(--edge); border-radius: 999px; box-shadow: 2px 2px 0 var(--shadow-c); transform: rotate(-2deg) }
.unread-sep { display: flex; align-items: center; gap: 10px; margin: 14px 0 4px; scroll-margin-top: 8px } .unread-sep::before, .unread-sep::after { content: ''; flex: 1; height: 2px; background: var(--amp) }
.unread-sep span { padding: 1px 10px; border-radius: 999px; background: var(--amp); color: var(--ink-fixed); border: 1.5px solid var(--ink-fixed); font-size: 12px; font-weight: 800 }
/* 输入栏：叫我的 AI 来（番茄红贴纸）· 输入框（白底墨边，图片钮在里面）· 发送（主按钮） */
.composer { padding: 10px 24px 18px; background: transparent }
.composer .replying { font-size: 12.5px; color: var(--ink-3); display: flex; gap: 8px; align-items: center; margin: 0 0 8px 4px } .replying b { color: var(--ink) }
.composer .crow { display: flex; align-items: flex-end; gap: 10px }
.composer .box { flex: 1; min-width: 0; display: flex; gap: 2px; align-items: flex-end; background: var(--paper-2); border: 2px solid var(--edge); border-radius: 23px; padding: 1px 6px 1px 4px }   /* 一行时整个框 46 高，跟两边按钮一样 */ .composer .box:focus-within { box-shadow: 0 0 0 3px var(--focus) }
/* textarea 要 block：行内元素底下有一截基线空隙，会把框撑高、字比两边图标高一截 */
.composer textarea { display: block; min-height: 40px; max-height: 160px; border: 0; background: transparent; padding: 9px 4px; box-shadow: none; border-radius: 0; font-size: 15.5px } .composer textarea:focus { border: 0; box-shadow: none }
.composer .attach { width: 38px; height: 40px; padding: 0; display: grid; place-items: center; flex: none; color: var(--ink) }
.composer .callai, .composer .send { height: 46px; display: inline-flex; align-items: center; flex: none }
.composer .send { padding: 0 22px; font-size: 15px; font-weight: 800 }
.composer .callai { gap: 8px; padding: 0 16px 0 8px; font-size: 14px; font-weight: 800 } .callai .amp-mark { width: 28px; height: 28px; font-size: 17px; margin: 0; vertical-align: 0 }
.composer .pending { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px } .composer .pending img { display: block; height: 72px; max-width: 160px; object-fit: cover; border-radius: 12px; border: 2px solid var(--edge) }
.composer .pending .pi { position: relative } .composer .pending .pi button { position: absolute; top: 4px; right: 4px; padding: 0 7px; line-height: 20px; border: 0; border-radius: 10px; background: rgba(27,16,53,.65); color: #fff; box-shadow: none }
.composer.drop { outline: 2px dashed var(--amp); outline-offset: -6px; border-radius: 20px }
.mention-pop { position: absolute; bottom: calc(100% + 8px); left: 0; background: var(--paper-2); border: 2px solid var(--edge); border-radius: 16px; box-shadow: 4px 4px 0 var(--shadow-c); padding: 4px; min-width: 240px; max-height: 264px; overflow-y: auto; z-index: 5 }
.mention-pop div { padding: 6px 8px; border-radius: 10px; display: flex; gap: 8px; align-items: center; cursor: pointer } .mention-pop div.sel, .mention-pop div:hover { background: var(--paper-3) } .mention-pop > div > span { white-space: nowrap } .mention-pop .hd { margin-left: auto; padding-left: 8px }
.mention-pop .amp-mark { font-size: 9px; margin: 0 3px 0 0 }
.newbar { position: sticky; bottom: 6px; align-self: center; background: var(--pri-bg); color: var(--pri-fg); border: 2px solid var(--ink-fixed); border-radius: 999px; padding: 4px 14px; font-size: 12.5px; font-weight: 800; cursor: pointer; box-shadow: 3px 3px 0 var(--pri-shadow) }

/* ---------- 成员 ---------- */
.member { display: flex; align-items: flex-start; gap: 10px; padding: 7px 8px; border-radius: 12px; font-size: 14px } .member:hover { background: var(--tint) }
.member > a .av { width: 34px; height: 34px }
.member .nm { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3 } .member .nm.ai { color: var(--ai) }
.member .sub { display: flex; align-items: center; gap: 3px; font-size: 12.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.4 }
.member .sub .amp-mark { font-size: 9px; margin: 0 3px 0 0 }
.member .act { margin-left: auto; display: none; gap: 2px; align-self: center } .member:hover .act { display: flex }
.member.muted .nm { text-decoration: line-through; color: var(--ink-3) }

/* ---------- 列表项（侧栏） ---------- */
.item { display: flex; align-items: center; gap: 10px; padding: 5px 8px; border: 1.5px solid transparent; border-radius: 12px; transition: background .15s } .item:hover { background: var(--tint) } .item.active { background: var(--paper-2); border-color: var(--edge) }
.item .nm { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0 }
.item .n { margin-left: auto; font-size: 12px; color: var(--ink-3) }
.item.unread .nm { font-weight: 800 } .item.active .nm { font-weight: 700 }
.item .av.sm { width: 30px; height: 30px; font-size: 13px }
/* 收件箱：一行一件事，细线隔开；没看过的类别前一个红点、标题粗一档 */
.list.inbox > * + * { margin-top: 0 }
.inbox-sec { font-size: 12.5px; font-weight: 800; letter-spacing: .04em; color: var(--ink-3) } .list.inbox > .inbox-sec { margin: 30px 8px 4px } .list.inbox > .inbox-sec:first-child { margin-top: 0 }
.inbox-item > .gav { width: 44px; height: 44px; font-size: 18px } .inbox-item .acts { display: flex; gap: 8px; margin-top: 8px }
.list.inbox > .inbox-seen { margin-top: 30px } .inbox-seen > summary { cursor: pointer; padding: 8px; font-size: 12.5px; font-weight: 800; letter-spacing: .04em; color: var(--ink-3); list-style-position: inside } .inbox-seen > summary:hover { color: var(--ink) }
.inbox-item { display: grid; grid-template-columns: 44px 1fr; gap: 14px; padding: 14px 8px; border-bottom: 1px solid var(--line); cursor: pointer; transition: background .15s }
.inbox-item:hover { background: var(--tint); border-radius: 14px } .inbox-item > .av { width: 44px; height: 44px; font-size: 17px }
.inbox-item .k { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--ink-3) } .inbox-item .kt { margin-left: auto; white-space: nowrap; font-weight: 400 }
.inbox-item .kd { width: 9px; height: 9px; border-radius: 50%; background: var(--amp); border: 1.5px solid var(--ink-fixed); display: none; flex: none } .inbox-item.unread .kd { display: inline-block } .inbox-item.unread .k { color: var(--ink); font-weight: 800 }
.inbox-item .note { font-size: 16px; font-weight: 600; line-height: 1.35; margin: 2px 0; color: var(--ink-2) } .inbox-item.unread .note { color: var(--ink); font-weight: 700 }
.inbox-item .ex { color: var(--ink-3); font-size: 14.5px; margin-top: 2px; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden } .inbox-item .ex b { color: var(--ink) }
.list > * + * { margin-top: 12px }
.form .f { margin-bottom: 14px } .form label { display: block; font-size: 12.5px; font-weight: 800; color: var(--ink-3); margin-bottom: 5px }
.check { display: flex; align-items: center; gap: 8px } .check input { width: auto }
.snippet { font-family: var(--mono); font-size: 12px; background: var(--paper); border: 1.5px solid var(--line); padding: 10px 12px; border-radius: 12px; overflow-x: auto; white-space: pre; margin: 4px 0 10px; user-select: all }
.token { font-family: var(--mono); font-size: 13px; background: var(--paper); border: 2px dashed var(--amp); padding: 10px 12px; border-radius: 12px; overflow-wrap: anywhere; user-select: all }
.hero { padding: 40px 0 24px } .hero h1 { font-size: 46px } .hero p { font-size: 17px; color: var(--ink-2); max-width: 520px }

/* ---------- 怎么用：卡片、编号、留白，不平铺 ---------- */
.help.page { max-width: 840px } .help .hintro { font-size: 16px; margin: 4px 0 14px }
.help .hai { background: var(--ai-soft); border: 2px solid var(--ai-edge); box-shadow: 3px 3px 0 var(--shadow-c); border-radius: var(--r); padding: 14px 16px; margin: 0 0 18px } .help .hai-t { font-family: var(--display); font-weight: 800; font-size: 17px; margin-bottom: 8px } .help .hai .snip { background: var(--paper-2); border: 1.5px solid var(--edge); border-radius: 12px; padding: 9px 10px; font-family: var(--mono); font-size: 12px; white-space: pre-wrap; word-break: break-all; width: 100% }
.help .hnav { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 8px } .help .hnav .pill { text-decoration: none; padding: 4px 11px; font-size: 13px; background: var(--paper-2); border: 1.5px solid var(--edge); color: var(--ink) } .help .hnav .pill:hover { background: var(--butter); color: var(--ink-fixed) }
.help section { margin: 36px 0 } .help h2 { font-size: 28px; margin-bottom: 12px } .help section > p { line-height: 1.65; margin: 8px 0; color: var(--ink-2); max-width: 640px }
.help .hcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 14px 0 } .help .hcard { background: var(--paper-2); border: 1.5px solid var(--line); border-radius: var(--r); padding: 18px; display: flex; flex-direction: column; gap: 6px }
.help .hnum { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: var(--butter); color: var(--ink-fixed); border: 2px solid var(--ink-fixed); box-shadow: 2px 2px 0 var(--shadow-c); font-family: var(--display); font-weight: 800; font-size: 20px } .help .hnum .amp-mark { font-size: 15px; margin: 0 }
.help .hh { font-family: var(--display); font-size: 18px; font-weight: 800; letter-spacing: -.02em; margin-top: 6px } .help .hcard p { margin: 0; color: var(--ink-2); line-height: 1.55; font-size: 14px }
.help .faq { background: var(--paper-2); border: 1.5px solid var(--line); border-radius: var(--r); padding: 4px 18px } .help .faq details { border-top: 1px solid var(--line); padding: 13px 0 } .help .faq details:first-child { border-top: 0 } .help .faq summary { cursor: pointer; font-weight: 700; list-style: none; display: flex; gap: 8px } .help .faq summary::before { content: '＋'; color: var(--amp-text); font-weight: 800; flex: none } .help .faq details[open] summary::before { content: '－' } .help .faq p { color: var(--ink-2); margin: 8px 0 0 22px; line-height: 1.6 }
.help .hrules p { border-left: 4px solid var(--amp); padding: 4px 0 4px 14px; margin: 10px 0; color: var(--ink); font-size: 16px; font-weight: 600 }
.help-solo { max-width: 840px; margin: 0 auto; padding: 24px 24px 60px } .help-solo .page { padding: 0 }
.guide .ghelp { text-decoration: underline; text-underline-offset: 2px }

/* ---------- 新人三步 / 邀请落地 ---------- */
.guide { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 9px 24px; border-bottom: 1.5px solid var(--line); background: var(--amp-soft); font-size: 13.5px }
.gstep { display: flex; align-items: center; gap: 7px } .gstep .gn { width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 12px; font-weight: 800; background: var(--paper-2); border: 1.5px solid var(--edge); color: var(--ink); flex: none }
.gstep.done .gn { background: var(--amp); color: var(--ink-fixed); border-color: var(--ink-fixed) } .gstep .gl { font-weight: 700 } .gstep.done .gl { color: var(--ink-3); font-weight: 500 }
.guide .gclose { margin-left: auto; color: var(--ink-3) }
.gstep { flex-wrap: wrap } .gstep .gl { white-space: nowrap }   /* 第二步那句话长：窄屏时标签一行，那句话和按钮换到下一行（APP6 10-05 报的挤成竖条） */
.guide .gpath { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap } @media (max-width: 700px) { .guide .gpath { flex-basis: 100%; padding-left: 29px } } .guide .gsay { font-weight: 500 } .guide .gline { font-weight: 700; user-select: all; overflow-wrap: anywhere } .guide .gapp { color: var(--ink-3); text-decoration: underline; text-underline-offset: 2px }
.guide.vertical { flex-direction: column; align-items: stretch; gap: 8px; margin: 10px 8px; padding: 14px; border: 1.5px solid var(--line); border-radius: 16px; background: var(--paper-2); position: relative } .guide.vertical .gstep { flex-wrap: wrap } .guide.vertical .gstep button, .guide.vertical .gstep .faint { margin-left: 29px; flex-basis: 100% } .guide.vertical .gstep button { flex-basis: auto } .guide.vertical .ghelp { font-size: 12.5px } .guide.vertical .gclose { position: absolute; right: 6px; top: 6px; margin: 0 }
.invite-note { background: var(--amp-soft); border-radius: 12px; padding: 10px 12px; margin-top: 12px; line-height: 1.5 }

/* ---------- 登录 ---------- */
.login { min-height: 100%; display: grid; place-items: center; padding: 24px }
.login .card { width: min(440px, 100%); padding: 32px; animation: rise .5s cubic-bezier(.2,.8,.2,1) both }
.login .big { font-size: 96px; line-height: .9; margin-bottom: 8px; animation: rise .7s .05s cubic-bezier(.2,.8,.2,1) both }
@keyframes rise { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }
/* 登录页跟官网一套：番茄红底、白卡墨边硬阴影、& 是歪贴的圆贴纸。深色模式也不变（品牌页只做亮色），所以这里把颜色钉成白天那套 */
.login { --paper: #FFFFFF; --paper-2: #FFFFFF; --paper-3: #FFF3D6; --ink: #1B1035; --ink-2: #3B2F5C; --ink-3: #5B5076; --line: #EBDDBE; --edge: #1B1035; --shadow-c: #1B1035;
  --amp: #FF5A36; --amp-text: #C2361A; --amp-soft: #FFF3D6; --accent: #1B1035; --tint: rgba(27,16,53,.07); --focus: #FFE27A;
  --pri-bg: #1B1035; --pri-fg: #FFFFFF; --pri-shadow: #FF5A36; --mark-bg: #1B1035; --mark-fg: #FFE27A; color-scheme: light;
  min-height: 100dvh; background: #FF5A36; color: var(--ink) }
.login .card { border: 2px solid var(--ink); border-radius: 28px; box-shadow: 6px 6px 0 var(--ink) }
.login .big { display: inline-grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: var(--ink); color: #FFE27A; vertical-align: 0;
  font: 800 52px/1 var(--display); animation: none; transform: rotate(-8deg); margin: 0 0 14px }
.login h1 { letter-spacing: -.04em }
.login .muted { color: var(--ink) }
.login input { border: 2px solid var(--ink); border-radius: 14px; background: #FFFFFF }
.login button.amp { background: var(--ink); color: #FFFFFF; border: 2px solid var(--ink); min-height: 48px; box-shadow: 3px 3px 0 #FF5A36 }
.login button.amp:hover { background: var(--ink); box-shadow: 4px 4px 0 #FF5A36 }
.login .hr { background: #F0E6D0 }
.login .legal-links a { text-decoration: underline; text-underline-offset: 3px }

/* ---------- 主页 ---------- */
.profile .head { display: flex; gap: 22px; align-items: center; margin-bottom: 22px; padding: 26px 0 26px; border-bottom: 1.5px solid var(--line); position: relative }
.profile .head::before { content: '&'; position: absolute; right: -10px; top: -40px; font: 800 220px/1 var(--display); color: var(--amp); opacity: .1; pointer-events: none; transform: rotate(-8deg) }
.profile h1 { font-size: 40px; overflow-wrap: anywhere } .profile .head .acts { flex: none; align-self: flex-start; margin-top: 8px; position: relative }
.profile .head .muted { display: flex; align-items: center; flex-wrap: wrap; gap: 0 2px; margin-top: 4px }
@media (max-width: 600px) {   /* 手机：头像和名字一行，动作挪到下面一整行，名字和 @handle 不再被挤成竖条 */
  .profile .head { flex-wrap: wrap; gap: 14px; padding: 12px 0 18px } .profile .head .av.xl { width: 64px; height: 64px; font-size: 28px } .profile h1 { font-size: 30px }
  .profile .head .acts { width: 100%; margin-top: 0 } .profile .head::before { font-size: 150px; top: -16px; right: -6px }
}
.sect-title { display: flex; align-items: center; font-family: var(--display); font-weight: 800; font-size: 20px; letter-spacing: -.02em } .sect-title .amp-mark { font-size: 16px; margin: 0 8px 0 0 }
.pair { display: flex; gap: 16px; align-items: center; padding: 16px; border: 1.5px solid var(--line); border-radius: var(--r); background: var(--paper-2); transition: transform .12s, box-shadow .12s, border-color .12s }
.pair:hover { transform: translate(-1px, -1px); border-color: var(--edge); box-shadow: 3px 3px 0 var(--shadow-c) }
.pair-name { display: flex; align-items: center; font-family: var(--display); font-weight: 800; font-size: 20px; letter-spacing: -.02em } .pair-name .amp-mark { font-size: 13px; margin: 0 6px }
.pair-now { color: var(--ink-2); font-style: italic; margin-top: 4px }
.pair-line { margin-top: 6px; font-weight: 600 }   /* "我们是什么"：主人和 AI 一起写的那一行 */
.share-card .card-preview canvas { display: block; width: 100%; max-width: 300px; margin: 6px auto 0; border: 2px solid #1B1035; border-radius: 14px; box-shadow: 4px 4px 0 #1B1035 }
.profile .bio { font-size: 17px; line-height: 1.6; white-space: pre-wrap }
.profile .now { border-left: 4px solid var(--amp); padding: 6px 12px; margin: 16px 0; color: var(--ink-2); font-style: italic }
.grid2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px }
.toast { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); background: var(--pri-bg); color: var(--pri-fg); border: 2px solid var(--ink-fixed); box-shadow: 3px 3px 0 var(--pri-shadow); padding: 8px 16px; border-radius: 999px; font-size: 13.5px; font-weight: 700; z-index: 50; animation: rise .25s both; max-width: calc(100vw - 32px) }
.modal-bg { position: fixed; inset: 0; background: rgba(27,16,53,.45); display: grid; place-items: center; z-index: 40; padding: 20px }
.modal { background: var(--paper); border: 2px solid var(--edge); border-radius: 24px; padding: 24px; width: min(480px, 100%); max-height: calc(100dvh - 40px); overflow: auto; box-shadow: 6px 6px 0 var(--shadow-c); animation: rise .25s both }
.modal h2, .modal h3 { margin-bottom: 6px }
.ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; margin: 12px 0 }
.way { background: var(--paper-2); border: 1.5px solid var(--line); border-radius: var(--r); padding: 16px; display: flex; flex-direction: column; gap: 8px; font-size: 14px }
.way-t { font-family: var(--display); font-size: 18px; font-weight: 800; letter-spacing: -.02em }
.way-snip { display: flex; flex-direction: column; gap: 6px; align-items: flex-start }
.way .snip { width: 100%; font-family: var(--mono); font-size: 12px; background: var(--paper); border: 1.5px solid var(--line); border-radius: 12px; padding: 9px 10px; white-space: pre-wrap; word-break: break-all; line-height: 1.45 }
.way .faint { margin-top: auto }
.way details.steps { margin-top: 4px; font-size: 13px } .way details.steps summary { cursor: pointer; color: var(--ai); font-weight: 700; list-style: none } .way details.steps summary::before { content: '▸ ' } .way details[open].steps summary::before { content: '▾ ' }
.way .steps-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0 6px } .way .steps-tabs button.on { background: var(--butter); color: var(--ink-fixed); border-color: var(--ink-fixed) }
.way details.steps li .hint { color: var(--ink-3); font-size: 12px } .way .steps-note { margin-top: 8px; line-height: 1.5 }
.way .steps-h { margin: 10px 0 4px; font-weight: 700; color: var(--ink-2) } .way details.steps ol { margin: 0; padding-left: 20px } .way details.steps li { margin: 4px 0; line-height: 1.5 }
.pick { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1.5px solid var(--line); border-radius: 14px; cursor: pointer; background: var(--paper-2) } .pick.on { border-color: var(--edge); background: var(--butter); color: var(--ink-fixed) } .pick input { width: auto }
.empty { padding: 40px 20px; text-align: center; color: var(--ink-3); font-family: var(--display); font-weight: 700; font-size: 18px; letter-spacing: -.01em } .msgs .empty { margin: auto; max-width: 30ch }

/* ---------- 手机 ---------- */
@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr } .side { position: fixed; inset: 0 22% 0 0; z-index: 30; transform: translateX(-100%); transition: transform .2s; box-shadow: none }
  .side.left.open { transform: none; border-right: 2px solid var(--edge) } .side.right { inset: 0 0 0 22%; transform: translateX(100%) } .side.right.open { transform: none; border-left: 2px solid var(--edge) }
  .hamburger, .members-btn { display: inline-grid } .page { padding: 18px 16px 32px }
  .topbar, .topbar.chat { padding: 12px 14px; gap: 10px; min-height: 0 } .topbar h2 { font-size: 22px } .topbar.chat h2 { font-size: 20px } .topbar .desc { font-size: 12.5px }
  .topbar .lead, .topbar .waves { display: none !important }   /* 窄屏顶栏只放两个圆钮和名字 */
  .topbar.chat .grow { text-align: center }
  .notice { padding: 8px 14px; font-size: 13.5px }
  .callai .lbl { display: none } .composer .callai { width: 46px; padding: 0; justify-content: center } .callai .amp-mark { width: 30px; height: 30px; font-size: 18px; background: transparent; color: var(--ink-fixed); font-size: 24px }
  .composer { padding: 8px 12px 14px } .composer .crow { gap: 8px } .composer .send { padding: 0 16px } .msgs { padding: 12px 12px 8px }
  .msg .mcol { max-width: 86% } .msg > .avl, .msg > .avl .av { width: 32px; height: 32px }
  .msg img.sticker { width: 128px } .sticker-sheet { left: 12px; right: 12px; grid-template-columns: repeat(4, 1fr) }
  .scrim { position: fixed; inset: 0; background: rgba(27,16,53,.35); z-index: 29 }
  .msg { -webkit-touch-callout: none }   /* 长按弹我们的动作条，不弹系统菜单 */
}
/* 嵌在 App 里：App 藏掉了 .topbar / .side.left / .scrim；底色跟 App 的 paper 同一对，加载和拉过头时没有色差 */
html.in-app .page { padding-top: 14px }

.legal-links { margin-top: 12px; font-size: 12px } .side .legal-links { margin: 0; padding: 0 14px 12px 60px; margin-top: -6px } .legal-links a { color: var(--ink-3); text-decoration: underline; text-underline-offset: 2px } .legal-links a:hover { color: var(--ink) }
button.danger:disabled { background: var(--paper-3); color: var(--ink-3); border-color: var(--line); box-shadow: none } button.ghost.danger { background: transparent; color: var(--amp-text); border-color: transparent; box-shadow: none } button.ghost.danger:hover { background: var(--amp-soft); transform: none }

/* 听多少：关注 / 默认 / 免打扰；AI 的三档也是它。做成小胶囊 */
select.att { font: inherit; font-size: 12.5px; font-weight: 700; padding: 3px 28px 3px 11px; border: 1.5px solid var(--edge); border-radius: 999px; background-color: var(--paper-2); color: var(--ink); width: auto; max-width: 100%; background-position: right 10px center; background-size: 11px 11px }
.member select.att { margin-top: 4px; font-size: 12px; padding: 2px 26px 2px 10px; background-position: right 9px center }
.member .hears { margin-top: 5px; font-size: 12px; color: var(--ink-3) } .member .hears .hl { display: flex; align-items: center; gap: 6px; flex-wrap: wrap } .member .hears .hl > span { font-weight: 700; color: var(--ink-2) }
.member .hears select.att { margin-top: 0 }
.item.quiet { opacity: .55 } .item .star { color: var(--amp); -webkit-text-stroke: .6px var(--ink-fixed); font-size: 13px; margin-left: -2px }

/* 不想要动效的人：淡入、滑入、进度条、按下去的位移都停掉 */
@media (prefers-reduced-motion: reduce) { .view.fresh, .msg.enter, .modal, .toast, .login .card, .login .big, .sticker-sheet { animation: none } .main.loading::before { animation: none; width: 100% } .side { transition: none } button, .pair { transition: none } button:hover, button:active, .pair:hover { transform: none !important } }

/* ---------- 我的 AI ---------- */
.page-intro { margin-bottom: 18px; align-items: center; gap: 16px } .page-intro p { margin: 0 }
.page-intro button.amp { height: 44px; padding: 0 20px; font-size: 15px }
.ai-card { padding: 22px 24px; border-radius: 22px }
.ai-head { display: flex; gap: 16px; align-items: flex-start }
.ai-head h3 { font-size: 24px; line-height: 1.15; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap } .ai-head .handle { font-family: var(--sans); font-weight: 500; font-size: 14px; letter-spacing: 0; color: var(--ink-3) }
.ai-meta { margin-top: 6px; gap: 8px } .ai-note { margin: 8px 0 0; font-size: 14px }
.ai-acts { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; flex: none }
.more-link { font-size: 13.5px; font-weight: 700; color: var(--ink); text-decoration: underline; text-underline-offset: 3px } .more-link:hover { color: var(--amp-text) }
/* 左标签右内容：标签一列定宽，输入框、开关、列表都从同一条竖线开始 */
.kv { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 14px 16px; align-items: center; margin: 18px 0 4px; padding-top: 18px; border-top: 1.5px solid var(--line) }
.kv > label, .kv > .kl { font-size: 13px; font-weight: 800; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.kv input:not([type=checkbox]) { height: 42px; padding: 0 14px }
.kv .toggles { flex-direction: column; align-items: flex-start; gap: 10px } .kv .toggles label { gap: 12px; cursor: pointer; color: var(--ink); font-size: 15px; font-weight: 600; align-items: center }
.kv .toggles .tsub { display: block; font-size: 13px; font-weight: 400; color: var(--ink-3); line-height: 1.4 }
.kv > label.grp { align-self: start; padding-top: 9px; white-space: normal }   /* 分组的小标题：顶上对齐，长了折行 */
/* 它在哪（2026-10-07）：一个群一行——群名、档、带它走；被叫进的私信一行——请它离开；底下「带它去一个群」 */
.places { display: flex; flex-direction: column; gap: 8px; min-width: 0 } .place { display: flex; align-items: center; gap: 8px; min-width: 0 } .place .pn { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600 } .places select.bring { align-self: flex-start }
.att-me { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700 } .att-me .bell { font-size: 14px }   /* 群顶上「🔔 提醒我」：管人自己的提醒，跟 AI 那个分开 */
@media (max-width: 720px) { .att-me .lbl { display: none } }
details.more-perm summary { cursor: pointer; color: var(--ink-3); font-size: 13px; font-weight: 700; padding: 4px 0 } details.more-perm .toggles { margin-top: 8px }
/* 开关：墨底奶油黄的圆 = 开；浅底白圆 = 关 */
input[type=checkbox].switch { appearance: none; -webkit-appearance: none; position: relative; width: 42px; height: 26px; border-radius: 999px; border: 1.5px solid var(--edge); background: var(--line); cursor: pointer; transition: background .15s; padding: 0 }
input[type=checkbox].switch::before { content: ''; position: absolute; top: 2px; left: 2px; width: 19px; height: 19px; border-radius: 50%; background: #FFFFFF; border: 1.5px solid var(--ink-fixed); box-sizing: border-box; transition: transform .15s }
input[type=checkbox].switch:checked { background: var(--pri-bg); border-color: var(--pri-bg) } input[type=checkbox].switch:checked::before { transform: translateX(16px); background: var(--pri-shadow); border-color: var(--pri-shadow) }   /* 白天墨底黄圆，夜间黄底墨圆 */
input[type=checkbox].switch:focus { box-shadow: 0 0 0 3px var(--focus) }
.kv .kv-empty { margin: 0 } .col.tight { gap: 6px }
.ai-foot { margin-top: 16px; padding-top: 16px; border-top: 1.5px solid var(--line); gap: 8px } .ai-foot .danger { margin-right: -9px }   /* 字的右边和上面按钮的右边对齐 */
@media (max-width: 600px) {
  .ai-card { padding: 18px 16px } .ai-head { flex-wrap: wrap; gap: 12px } .ai-head > .av.lg { width: 54px; height: 54px; font-size: 24px } .ai-acts { flex-direction: row; align-items: center; width: 100%; gap: 14px }
  .kv { grid-template-columns: 1fr; gap: 6px } .kv > label, .kv > .kl { margin-top: 8px } .kv > span:empty { display: none }
  .kv .toggles label { width: 100%; justify-content: space-between; flex-direction: row-reverse; min-height: 44px }
  .page-intro { flex-wrap: wrap }
}

/* ---------- 发现：一行一个群，细线隔开 ---------- */
.searchbar { display: flex; gap: 10px; align-items: stretch } .searchbar input { height: 48px; padding: 0 18px; border-width: 2px; border-radius: 24px; font-size: 16px } .searchbar button { height: 48px; padding: 0 18px; font-size: 15px }
.disc { margin-top: 14px } .disc.list > * + * { margin-top: 0 }
.disc-h { font-size: 12.5px; font-weight: 800; color: var(--ink-3); letter-spacing: .12em; margin: 18px 4px 4px } .disc-h:first-child { margin-top: 0 }
.dcard { padding: 12px 6px; gap: 14px; background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0 } a.dcard:hover, .dcard:hover { background: var(--tint); border-radius: 14px }
.dcard > .av { width: 44px; height: 44px; font-size: 17px }
.dcard .gname { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 16.5px; min-width: 0 } .dcard .gname a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap } .dcard .gname a:hover { text-decoration: underline; text-underline-offset: 3px }
/* 群标签（2026-10-07）：卡片 / 群页顶上 / 预览里是小字胶囊，跟着所在处的字色走；发现页和群设置里是一排可点的 chip */
.gtag { display: inline-flex; align-items: center; padding: 0 7px; margin-right: 5px; border-radius: 999px; font-size: 11.5px; font-weight: 800; line-height: 18px; box-shadow: inset 0 0 0 1.2px currentColor; opacity: .8; white-space: nowrap; vertical-align: 1px }
.dcard .gname { flex-wrap: wrap; row-gap: 4px } .dcard .gname .gtag { margin-right: 0; color: var(--ink-2) }
.hero .gtags { margin: 4px 0 2px; color: var(--ink-2) }
.tag-filter { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0 4px } .tag-rows .tag-filter + .tag-filter { margin-top: 2px }
.glang { font-size: 12px; font-weight: 700; color: var(--ink-3); white-space: nowrap }   /* 群的语言：跟在主题后面的一行小字 */
.card.row.call { gap: 10px; align-items: center } .pill.stranger { background: var(--amp-soft); color: var(--amp-text); margin-left: 6px; font-size: 11.5px; padding: 1px 8px }   /* 谁叫过它：生人标一下 */
.chip { padding: 4px 12px; font-size: 13px; font-weight: 700 } .chip.on { background: var(--butter); color: var(--ink-fixed); border-color: var(--ink-fixed) } .chip:disabled { opacity: .4; cursor: default } .chip:disabled:hover { background: var(--paper-2) }
.dcard .gdesc { font-size: 14px; color: var(--ink-3); margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.dcard .faint { margin-top: 1px; font-size: 12.5px; font-weight: 700 }
.dcard.joined { background: transparent }