/* 山水通讯：stable controls, expressive conversation wallpaper. */
:root {
  --bg:#f5f5f3; --panel:#ffffff; --paper:#ffffff;
  --ink:#252729; --muted:#727579; --line:#e8e9e6;
  --accent:#26825b; --accent-text:#ffffff; --soft:#edf4ee;
  --blue:#f0f0ed; --error:#c63f37; --seal:#ba5144;
  --bubble:#ffffff; --mine:#e0f2df; --glass:#ffffff;
  --shadow:0 12px 48px rgba(30,35,30,.10);
  --scene-image:url("assets/reference-mountains.png");
  --scene-paper:#f5f5f3; --scene-size:auto 100%; --scene-position:right bottom;
  color-scheme:light;
}
body { min-height:100dvh; overflow:hidden; position:relative; isolation:isolate; background:var(--bg); color:var(--ink); }
.world-backdrop { position:fixed; inset:0; z-index:0; pointer-events:none; background:var(--scene-image) var(--scene-position)/var(--scene-size) no-repeat var(--scene-paper); }
.world-wash { display:none; }
body[data-scene="ink"],body[data-scene="mountains"] { --scene-image:url("assets/reference-mountains.png"); }
body[data-scene="traveler"] { --scene-image:url("assets/reference-traveler.png"); }
body[data-scene="meeting"] { --scene-image:url("assets/reference-meeting.png"); }
body[data-scene="rider"] { --scene-image:url("assets/reference-rider.png"); }
body[data-scene="walking"] { --scene-image:url("assets/reference-walking.png"); }
body:is([data-scene="ink"],[data-scene="mountains"]) { --scene-span:76.916667dvh; }
body[data-scene="traveler"] { --scene-span:51.649928dvh; }
body:is([data-scene="meeting"],[data-scene="rider"],[data-scene="walking"]) { --scene-span:52.350945dvh; }
body:is([data-scene="ink"],[data-scene="mountains"],[data-scene="traveler"],[data-scene="meeting"],[data-scene="rider"],[data-scene="walking"]) .world-backdrop {
  mask-image:linear-gradient(to right,transparent calc(100% - var(--scene-span)),#000 calc(100% - var(--scene-span) + 100px));
}
body[data-scene="zha"] { --scene-image:url("assets/zha-ni-zan.jpg"); --scene-size:cover; --scene-position:center; --scene-paper:#ded5bb; }
body[data-scene="chen"] { --scene-image:url("assets/chen-ni-zan.jpg"); --scene-paper:#d4ba91; }
body[data-scene="zhai"] { --scene-image:url("assets/zhai-landscape.jpg"); --scene-paper:#af905f; }
body[data-scene="monet"] { --scene-image:url("assets/monet-water-lilies.jpg"); --scene-size:cover; --scene-position:center bottom; }
body[data-scene="starry"] { --scene-image:url("assets/van-gogh-rhone.jpg"); --scene-size:cover; --scene-position:center bottom; --scene-paper:#183447; }
body.dark,body[data-theme="dark"] {
  --bg:#222423; --panel:#282a29; --paper:#303231;
  --ink:#ecefed; --muted:#adb4ae; --line:#3c403d;
  --accent:#8ad4a7; --accent-text:#193e29; --soft:#35423a; --blue:#3b3e3b;
  --error:#f19a91; --seal:#e99589; --bubble:#323632; --mine:#405d45; --glass:#282a29;
  --shadow:0 12px 48px rgba(0,0,0,.22); color-scheme:dark;
}
body.dark .world-backdrop { filter:brightness(.65); }
body.art-focus .world-backdrop { background-size:contain; background-position:center; filter:none; mask-image:none; }
body.art-focus .app { visibility:hidden; pointer-events:none; }
.world-header { position:relative; z-index:4; height:64px; width:calc(100% - 48px); max-width:1560px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.world-brand { display:flex; align-items:center; gap:11px; background:var(--panel); padding:5px 12px 5px 6px; border-radius:7px; }
.brandseal { width:28px; height:36px; color:var(--seal); border:1px solid currentColor; outline:1px solid currentColor; outline-offset:-4px; border-radius:2px; text-align:center; display:flex; align-items:center; justify-content:center; flex-direction:column; font:15px/1.03 var(--display-font); }
.world-brand h1 { font-size:23px; line-height:1.25; letter-spacing:.08em; }
.world-brand p { display:none; }
.appearance-controls { display:flex; align-items:center; gap:8px; }
.appearance-controls > button,.appearance-menu > summary { min-height:36px; padding:6px 12px; display:flex; align-items:center; justify-content:center; gap:7px; background:var(--panel); border:1px solid var(--line); border-radius:8px; font-size:13px; cursor:pointer; list-style:none; }
.appearance-controls > button:hover,.appearance-menu > summary:hover { background:var(--bg); }
.appearance-menu > summary::-webkit-details-marker { display:none; }
.appearance-menu > summary:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }
.appearance-controls svg { width:17px; height:17px; }
.appearance-menu { position:relative; }
.world-actions { position:absolute; top:44px; right:0; width:208px; padding:7px; display:grid; background:var(--panel); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); }
.world-actions button { min-height:40px; padding:8px 12px; text-align:left; color:var(--ink); border-radius:6px; font-size:14px; }
.world-actions button:hover { background:var(--bg); }
.world-actions button span { margin-right:8px; }
.world-actions #theme { border-top:1px solid var(--line); border-radius:0 0 6px 6px; margin-top:4px; }
.samplebar { position:fixed; bottom:2px; left:50%; transform:translateX(-50%); height:19px; width:max-content; max-width:calc(100% - 24px); z-index:3; border:0; border-radius:3px; background:var(--panel); padding:0 9px; color:var(--muted); font:10px/1.5 var(--system-reading-font); gap:7px; pointer-events:none; }
.samplebar span:first-child { color:var(--muted); font-weight:400; }
.app,.app.no-details { position:relative; z-index:2; grid-template-columns:68px 292px minmax(0,1fr); max-width:1560px; width:calc(100% - 48px); height:calc(100dvh - 88px); min-height:0; margin:0 auto; background:transparent; border:1px solid var(--line); border-radius:13px; overflow:hidden; box-shadow:var(--shadow); }
.app:not(.no-details) { grid-template-columns:68px 292px minmax(0,1fr) 270px; }
.rail { background:var(--bg); padding:18px 6px 16px; gap:12px; border-right:1px solid var(--line); }
.brand { display:none; }
.railbtn { width:50px; min-height:54px; padding:9px 0 6px; gap:4px; border-radius:9px; color:var(--muted); }
.railbtn.active { background:var(--soft); color:var(--accent); }
.railbtn:hover { background:var(--soft); color:var(--accent); }
.railbtn i svg { width:22px; height:22px; stroke-width:1.8; }
.selfavatar { width:34px; height:34px; background:var(--accent); color:var(--accent-text); font:19px var(--display-font); }
.conversations { background:var(--panel); border-right:1px solid var(--line); }
.spacehead { padding:22px 20px 16px; gap:8px; }
.spacehead h1 { letter-spacing:0; }
.spacehead p { margin-top:4px; }
.search { margin:0 16px; background:var(--bg); padding:9px 11px; border-radius:8px; border:0; }
.search input::placeholder { color:var(--muted); opacity:1; }
.search kbd { font-size:10px; border:0; padding:0; }
.filters { padding:14px 16px 10px; gap:5px; }
.filters button { padding:5px 11px; border-radius:15px; min-height:30px; }
.filters .selected { background:var(--soft); color:var(--accent); }
.chatlist { padding:0 8px; scrollbar-width:thin; }
.listlabel { padding:12px 12px 7px; color:var(--muted); gap:5px; }
.chatitem { min-height:78px; padding:13px 12px; gap:11px; border-radius:8px; margin-bottom:2px; }
.chatitem.current { background:var(--bg); }
.chatitem:hover { background:var(--bg); }
.avatar { width:43px; height:43px; border-radius:50%; background:#e5e8df; color:#526149; font:18px var(--system-reading-font); }
.avatar.ai { background:#f4eddd; color:#926b23; border-radius:12px; }
.avatar.group { border-radius:12px; background:#dfe9df url("assets/reference-mountains.png") center 32%/160% auto; color:#3f5142; }
.avatar.group svg { filter:drop-shadow(0 1px 1px white); }
.avatar.plum { background:#f5e2de; color:#a95d57; }
.avatar.sand { background:#e9e4f3; color:#766391; }
body.dark .avatar { background:#424b43; color:#d8e1d7; }
body.dark .avatar.ai { background:#544936; color:#efd39c; }
body.dark .avatar.group { background-color:#444d43; color:#2e4034; }
body.dark .avatar.plum { background:#57413e; color:#e9bcb4; }
body.dark .avatar.sand { background:#494353; color:#d7c7ed; }
.itemtop { gap:8px; }
.preview { margin-top:5px; }
.unread { background:#e75b53; color:white; min-width:19px; height:19px; border-radius:10px; padding:0 5px; }
.smalltag { color:var(--muted); background:var(--blue); padding:0 5px; border-radius:4px; }
.spacefoot { padding:12px 18px; color:var(--muted); border-top:1px solid var(--line); }
.statusdot { background:var(--accent); }
.conversation { background:transparent; }
.chathead { min-height:76px; padding:15px 27px; background:var(--panel); border-bottom:1px solid var(--line); gap:12px; }
.chathead .avatar { width:42px; height:42px; border-radius:12px; }
.headtext h2 { letter-spacing:0; }
.headtext p { margin-top:4px; }
.iconbtn { width:36px; height:36px; border-radius:8px; color:var(--muted); }
.iconbtn:hover { color:var(--ink); background:var(--bg); }
.headtools { gap:7px; }
.chatpolicy { min-height:34px; padding:7px 27px; background:var(--panel); border-bottom:1px solid var(--line); gap:7px; color:var(--muted); }
.chatpolicy button { color:var(--accent); }
.networknotice { background:var(--paper); padding:10px 27px; }
.messages { padding:24px 28px 12px; font-size:16px; min-height:80px; scrollbar-width:thin; scrollbar-color:#aeb4ab70 transparent; }
.datedivider { width:fit-content; max-width:100%; margin:0 auto 23px; padding:3px 11px; border-radius:10px; background:var(--panel); color:var(--muted); }
.datedivider:before,.datedivider:after { display:none; }
.msg { margin-bottom:15px; gap:10px; }
.msg .avatar { width:34px; height:34px; font-size:15px; border-radius:50%; margin-top:2px; }
.msg .avatar.ai { border-radius:10px; }
.msgbody { max-width:min(78%,660px); }
.msgmeta { width:fit-content; max-width:100%; gap:8px; padding:1px 6px; border-radius:4px; margin-bottom:6px; background:var(--panel); }
.msgmeta strong { color:var(--muted); }
.msg.mine .msgmeta { margin-left:auto; }
.bubble { padding:11px 16px; border-radius:3px 12px 12px 12px; background:var(--bubble); border:1px solid rgba(40,50,40,.04); box-shadow:0 1px 2px rgba(20,25,20,.035); color:var(--ink); }
.msg.mine .bubble { background:var(--mine); border-color:transparent; border-radius:12px 3px 12px 12px; }
.msg.ai .bubble { background:var(--bubble); border:1px solid var(--line); border-radius:3px 12px 12px 12px; padding:12px 17px; }
.msgactions { gap:11px; min-height:24px; margin:4px 0 0; width:fit-content; max-width:100%; padding:0 6px; border-radius:4px; background:var(--panel); opacity:0; transition:opacity .12s; }
.msg:hover .msgactions,.msg:focus-within .msgactions,.msgactions:has(.msgstate) { opacity:1; }
.msgactions button { min-height:24px; color:var(--muted); }
.msg.mine .msgactions { margin-left:auto; }
.inlinequote { border-left:2px solid var(--accent); }
.filebubble { gap:12px; min-width:210px; padding:4px 0; }
.filebubble svg { width:30px; height:34px; color:var(--accent); }
.filebubble strong { margin-bottom:2px; }
.composearea { padding:10px 22px 14px; background:var(--panel); border-top:1px solid var(--line); }
.quickactions { padding:0 0 9px; gap:8px; }
.quickactions span { color:var(--muted); margin-right:2px; }
.quickactions button { border:1px solid var(--line); border-radius:14px; padding:3px 11px; background:var(--panel); color:var(--muted); }
.quickactions button:hover { border-color:var(--accent); color:var(--accent); }
.composer { padding:11px 12px 8px; border:1px solid var(--line); border-radius:10px; background:var(--bg); }
.composer:focus-within { border-color:var(--accent); background:var(--paper); }
.composer textarea { min-height:44px; max-height:140px; padding:0 2px; }
.composer textarea::placeholder { color:var(--muted); opacity:1; }
.composertools { margin-top:4px; gap:8px; }
.toolleft .iconbtn { width:31px; height:31px; }
.toolleft i svg { width:20px; height:20px; }
.mention { color:var(--muted); border-radius:5px; padding:4px 6px; }
.mention:hover { color:var(--accent); background:var(--soft); }
.keyhint { font-size:10px; }
.sendbtn { min-height:34px; padding:7px 15px; border-radius:7px; background:var(--accent); color:var(--accent-text); }
.sendbtn:disabled { background:var(--line); color:var(--muted); opacity:1; }
.sendbtn svg { width:16px; height:16px; }
.composenote { display:none; }
.quotebar,.attachment { background:var(--soft); padding:8px 10px; }
.details { background:var(--panel); padding:24px 20px; border-left:1px solid var(--line); }
.detailshead { margin-bottom:4px; }
.detailsprofile { padding:18px 0 23px; }
.detailsprofile h3 { letter-spacing:0; }
.detailsprofile .avatar { border-radius:16px; }
.detailsection { padding:19px 0; }
.memberrow { padding:6px 0; }
.policybox { background:var(--bg); border-radius:8px; padding:12px; }
.policybox select { background:var(--panel); min-height:34px; }
.detailfile { padding:8px 0; }
.detailaction { padding:10px 0; }
.landscape { display:none; }
dialog { width:500px; max-width:calc(100vw - 32px); max-height:86dvh; border:1px solid var(--line); border-radius:14px; background:var(--panel); padding:24px; box-shadow:var(--shadow); }
dialog::backdrop { background:rgba(20,25,22,.32); backdrop-filter:blur(2px); }
.dialoghead { margin-bottom:17px; }
.dialoginput,.dialogchoice { background:var(--paper); border-color:var(--line); }
.dialogcopy a { color:var(--accent); text-underline-offset:3px; }
.scene-dialog { width:880px; }
.scene-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:13px; }
.scene-card { text-align:left; border:1px solid var(--line); border-radius:9px; padding:0 0 13px; overflow:hidden; background:var(--paper); }
.scene-card[aria-pressed="true"] { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.scene-card:hover { border-color:var(--accent); }
.scene-card img { display:block; width:100%; height:145px; object-fit:cover; margin:0 0 11px; }
.scene-card span { display:block; margin:0 12px 5px; font-family:var(--display-font); font-size:22px; }
.scene-card small { display:block; margin:0 12px; color:var(--muted); font-size:12px; }
#toast { background:var(--ink); color:var(--paper); bottom:35px; font-size:13px; border-radius:8px; }
@media(min-width:1600px) { .app,.app.no-details { grid-template-columns:72px 308px minmax(0,1fr); } .app:not(.no-details) { grid-template-columns:72px 308px minmax(0,1fr) 280px; } .messages { padding-inline:42px; } }
@media(max-width:1180px) {
  .app,.app.no-details,.app:not(.no-details) { grid-template-columns:62px 258px minmax(0,1fr); }
  .details { display:none; }
  .app.show-details .details { display:block; position:fixed; top:64px; right:24px; bottom:24px; width:280px; z-index:5; border:1px solid var(--line); border-radius:0 12px 12px 0; box-shadow:var(--shadow); }
  .phoneclose { display:inline-flex; }
  .keyhint { display:none; }
  .sendbtn { margin-left:auto; }
  .chathead,.chatpolicy { padding-inline:20px; }
  .messages { padding-inline:20px; }
  .composearea { padding-inline:18px; }
}
@media(max-width:900px) {
  .world-header { width:calc(100% - 24px); }
  .app,.app.no-details,.app:not(.no-details) { width:calc(100% - 24px); grid-template-columns:58px 230px minmax(0,1fr); }
  .rail { padding-inline:4px; }
  .railbtn { width:47px; }
  .spacehead { padding:19px 15px 15px; }
  .search { margin-inline:12px; }
  .search kbd { display:none; }
  .filters { padding-inline:12px; gap:1px; }
  .filters button { padding-inline:10px; }
  .chatitem { padding-inline:9px; gap:8px; }
  .avatar { width:38px; height:38px; }
  .msgbody { max-width:calc(100% - 44px); }
  .messages { padding-inline:15px; }
  .quickactions { gap:5px; }
  .quickactions button { padding-inline:8px; }
  .app.show-details .details { right:12px; }
}
@media(max-width:720px) {
  .world-header { height:56px; width:calc(100% - 20px); gap:8px; }
  .world-brand { padding:3px 0; gap:8px; background:var(--panel); }
  .brandseal { width:24px; height:31px; font-size:13px; }
  .world-brand h1 { font-size:20px; letter-spacing:0; }
  .appearance-controls { gap:5px; }
  .appearance-controls > button,.appearance-menu > summary { min-height:32px; padding:5px 8px; font-size:12px; gap:4px; }
  .appearance-controls > button svg { display:none; }
  .world-actions { top:40px; width:190px; }
  .app,.app.no-details,.app:not(.no-details) { display:flex; flex-direction:column; width:calc(100% - 20px); height:calc(100dvh - 80px); margin:0 auto; min-height:0; border-radius:10px; }
  .conversations { order:1; flex:1; min-height:0; border-right:0; }
  .rail { order:2; flex-direction:row; justify-content:space-around; padding:3px 10px; gap:8px; height:61px; min-height:61px; border:0; border-top:1px solid var(--line); background:var(--panel); }
  .railspacer,.selfavatar { display:none; }
  .railbtn { width:56px; min-height:50px; padding:7px 3px 5px; gap:3px; }
  .conversation { display:none; }
  .app.mobile-chat { display:block; }
  .app.mobile-chat .conversation { display:flex; height:100%; }
  .app.mobile-chat .rail,.app.mobile-chat .conversations { display:none; }
  .back { display:inline-flex; width:30px; }
  .chathead { min-height:67px; padding:11px 12px; gap:8px; }
  .chathead .avatar { width:35px; height:35px; border-radius:10px; }
  .headtools { gap:0; }
  .headtools .iconbtn { width:32px; }
  .headtools .iconbtn svg { width:20px; }
  .chatpolicy { padding:7px 13px; min-height:36px; gap:5px; }
  .chatpolicy button { flex-shrink:0; }
  .messages { padding:20px 13px 10px; }
  .msg { gap:8px; margin-bottom:14px; }
  .msg .avatar { width:30px; height:30px; font-size:14px; }
  .msgbody { max-width:calc(100% - 38px); }
  .msgmeta { gap:6px; }
  .bubble,.msg.ai .bubble { padding:10px 13px; }
  .msgactions { opacity:1; min-height:22px; }
  .filebubble { min-width:190px; }
  .composearea { padding:9px 10px 10px; }
  .quickactions { gap:5px; padding-bottom:8px; }
  .quickactions span { display:none; }
  .quickactions button { min-height:27px; padding:3px 10px; }
  .composer { padding:10px 9px 7px; }
  .composer textarea { min-height:40px; max-height:110px; }
  .composertools { gap:3px; margin-top:2px; }
  .toolleft .iconbtn { width:31px; height:32px; }
  .mention { padding-inline:4px; }
  .sendbtn { min-height:34px; padding:6px 12px; }
  .samplebar { font-size:9px; gap:5px; max-width:calc(100vw - 12px); }
  .samplebar span:nth-child(2) { display:inline; }
  .app.show-details .details { top:56px; bottom:24px; right:10px; width:min(290px,calc(100vw - 20px)); border-radius:10px; }
  dialog { padding:18px; }
  .scene-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .scene-card img { height:135px; }
}
@media(max-width:360px) {
  .world-brand h1 { font-size:17px; }
  .world-brand { gap:6px; }
  .appearance-controls > button,.appearance-menu > summary { padding-inline:6px; }
  .appearance-controls svg { width:14px; }
  .chathead { padding-inline:8px; gap:6px; }
  .headtools .iconbtn { width:28px; }
  .chathead .avatar { width:31px; height:31px; }
  .chatpolicy { padding-inline:10px; }
  .messages { padding-inline:10px; }
  .composearea { padding-inline:8px; }
  .mention { font-size:12px; }
  .samplebar { font-size:8px; }
}
@media(max-height:650px) and (min-width:721px) { .world-header { height:52px; } .app,.app.no-details,.app:not(.no-details) { height:calc(100dvh - 76px); } .chathead { min-height:64px; padding-block:10px; } .composearea { padding-top:8px; padding-bottom:10px; } }
@media(hover:none) { .msgactions { opacity:1; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; } }

/* Uploaded profile pictures share the same shape across navigation and messages. */
.selfavatar { padding:0; overflow:hidden; cursor:pointer; }
.selfavatar:hover { box-shadow:0 0 0 3px var(--soft); }
.avatar-image { display:block; width:100%; height:100%; object-fit:cover; border-radius:inherit; }
.profile-avatar-editor { font-family:var(--ui-font); }
.profile-avatar-preview { width:144px; height:144px; margin:24px auto 18px; display:grid; place-items:center; border-radius:50%; overflow:hidden; background:var(--accent); color:var(--accent-text); font:60px var(--display-font); }
.profile-avatar-help { text-align:center; font-size:16px; color:var(--ink); }
.profile-avatar-copy { text-align:center; margin:10px 0 16px; }
.profile-avatar-tools { display:flex; justify-content:center; gap:10px; }
.profile-avatar-status { min-height:42px; margin:16px 0 4px; text-align:center; font:13px/1.6 var(--ui-font); color:var(--muted); }
.profile-avatar-editor .dialogactions { margin-top:12px; }
.profile-avatar-editor .sendbtn,.profile-avatar-editor .secondarybtn { min-height:38px; font-family:var(--ui-font); }