:root{
  --bg:#0f1115; --bg2:#161922; --bg3:#1d2130; --panel:#171a22; --line:#262b39;
  --txt:#e7eaf0; --txt2:#9aa3b2; --txt3:#6b7386; --accent:#6d7cff; --accent2:#8b5cf6;
  --ok:#22c55e; --warn:#f59e0b; --danger:#ef4444; --bubble-me:#5b63d6; --bubble-other:#232838;
  --radius:14px; --shadow:0 8px 30px rgba(0,0,0,.35);
}
html[data-theme="light"]{
  --bg:#f2f4f8; --bg2:#ffffff; --bg3:#eef1f6; --panel:#ffffff; --line:#e3e7ee;
  --txt:#1b1f27; --txt2:#5b6472; --txt3:#8a93a3; --accent:#5865f2; --bubble-me:#5865f2; --bubble-other:#eef1f6;
  --shadow:0 8px 30px rgba(20,30,60,.08);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif;
  background:var(--bg);color:var(--txt);overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
button,input,textarea,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
a{color:var(--accent)}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:var(--line);border-radius:6px}
::-webkit-scrollbar-track{background:transparent}

/* layout */
#app{display:flex;height:100vh;height:100dvh;overflow:hidden}
#sidebar{
  width:310px;flex:0 0 310px;background:var(--panel);border-right:1px solid var(--line);
  display:flex;flex-direction:column;min-width:0;transition:margin .2s;
}
#main{flex:1;display:flex;flex-direction:column;min-width:0;background:var(--bg)}
#members-panel{
  width:300px;flex:0 0 300px;background:var(--panel);border-left:1px solid var(--line);
  display:flex;flex-direction:column;min-width:0;transition:margin .2s;
}
.hidden{display:none!important}

/* sidebar */
.side-head{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line)}
.side-head .me{display:flex;align-items:center;gap:10px;flex:1;min-width:0;cursor:pointer}
.avatar{width:38px;height:38px;border-radius:50%;object-fit:cover;background:var(--bg3);flex:0 0 auto}
.avatar.sm{width:30px;height:30px}
.avatar.lg{width:64px;height:64px}
.avatar.xl{width:84px;height:84px}
.me .nm{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.me .sub{font-size:11px;color:var(--txt3)}
.icon-btn{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:var(--txt2)}
.icon-btn:hover{background:var(--bg3);color:var(--txt)}
.search{padding:10px 12px}
.search input{width:100%;background:var(--bg3);border:1px solid transparent;border-radius:10px;padding:9px 12px;outline:none}
.search input:focus{border-color:var(--accent)}
.conv-list{flex:1;overflow-y:auto;padding:4px 6px}
.conv-status{font-size:11px;color:var(--txt3);padding:2px 14px 6px;white-space:pre-wrap;word-break:break-all}
.conv-status.err{color:var(--danger)}
.conv{display:flex;gap:10px;padding:9px 10px;border-radius:11px;cursor:pointer;align-items:center;position:relative}
.conv:hover{background:var(--bg3)}
.conv.active{background:linear-gradient(90deg,rgba(109,124,255,.22),rgba(139,92,246,.12))}
.conv .meta{flex:1;min-width:0}
.conv .row1{display:flex;justify-content:space-between;gap:8px}
.conv .nm{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conv .tm{font-size:11px;color:var(--txt3);flex:0 0 auto}
.conv .row2{display:flex;justify-content:space-between;gap:8px;align-items:center}
.conv .last{font-size:12.5px;color:var(--txt2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.badge{background:var(--danger);color:#fff;font-size:11px;min-width:18px;height:18px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 5px;font-weight:600}
.badge.dot{width:9px;height:9px;min-width:9px;padding:0;border-radius:50%}

/* main header */
.chat-head{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line);background:var(--panel);min-height:60px}
.chat-head .ttl{flex:1;min-width:0}
.chat-head .ttl .t{font-weight:600;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chat-head .ttl .s{font-size:11.5px;color:var(--txt3)}
.conn{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--txt3)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--danger)}
.dot.on{background:var(--ok)}

/* messages */
#messages{flex:1;overflow-y:auto;padding:18px 10px 8px;display:flex;flex-direction:column;gap:12px;scroll-behavior:smooth}
.msg{display:flex;gap:10px;max-width:82%;position:relative;animation:pop .16s ease}
@keyframes pop{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.msg.me{align-self:flex-end;flex-direction:row-reverse}
.msg .body{min-width:0}
.msg .who{font-size:11.5px;color:var(--txt3);margin:0 4px 3px;display:flex;gap:6px;align-items:center}
.msg.me .who{justify-content:flex-end}
.bubble{background:var(--bubble-other);border-radius:14px;padding:9px 12px;font-size:14.5px;line-height:1.5;word-break:break-word;white-space:pre-wrap;position:relative;box-shadow:0 1px 1px rgba(0,0,0,.08)}
.msg.me .bubble{background:var(--bubble-me);color:#fff}
.bubble.media{padding:4px;background:transparent!important}
.bubble.plain{background:transparent!important;padding:0;color:var(--txt2);font-size:12.5px}
.msg .time{font-size:10.5px;color:var(--txt3);margin:3px 4px 0}
.msg.me .time{text-align:right}
.msg .tools{position:absolute;top:-8px;opacity:0;transition:.12s;display:flex;gap:2px;background:var(--panel);border:1px solid var(--line);border-radius:9px;padding:2px;z-index:3;box-shadow:var(--shadow)}
.msg.me .tools{left:0}
.msg:not(.me) .tools{right:0}
.msg:hover .tools{opacity:1}
.msg .tools button{width:28px;height:26px;border-radius:7px;color:var(--txt2);font-size:13px}
.msg .tools button:hover{background:var(--bg3);color:var(--txt)}
.msg.highlight .bubble{outline:2px solid var(--accent);outline-offset:1px}
.sys{text-align:center}
.sys .bubble{display:inline-block;background:transparent!important;color:var(--txt3);font-size:12px;padding:3px 10px}
.imgmsg{max-width:320px;max-height:360px;border-radius:11px;display:block;cursor:zoom-in;background:var(--bg3)}
.vidmsg{max-width:360px;border-radius:11px;display:block;background:#000}
.filemsg{display:flex;gap:11px;align-items:center;padding:10px 12px;min-width:210px}
.filemsg .fi{width:40px;height:40px;border-radius:10px;background:rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;font-size:18px;flex:0 0 auto}
.filemsg .fn{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:210px}
.filemsg .fs{font-size:11px;opacity:.75}
.aumsg{font-size:13.5px}
.aumsg .card{border:1px solid var(--line);border-radius:11px;padding:11px 13px;background:var(--bg3);min-width:210px}
.aumsg .title{font-weight:600;margin-bottom:6px}
.md h1,.md h2,.md h3{margin:.4em 0;line-height:1.3}
.md h1{font-size:1.35em;border-bottom:1px solid var(--line);padding-bottom:.2em}
.md h2{font-size:1.2em}.md h3{font-size:1.05em}
.md p{margin:.35em 0}.md ul,.md ol{margin:.35em 0 .35em 1.3em}
.md code{background:rgba(127,127,127,.22);padding:1px 5px;border-radius:5px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.9em}
.md pre{background:#0b0d12;border:1px solid var(--line);border-radius:10px;padding:11px;overflow:auto;margin:.5em 0}
.md pre code{background:none;padding:0}
.md blockquote{border-left:3px solid var(--accent);padding-left:10px;color:var(--txt2);margin:.4em 0}
.md a{color:#9fb2ff}
.md img{max-width:100%;border-radius:8px}
.quote{display:flex;gap:8px;border-left:3px solid var(--accent);background:rgba(127,127,127,.13);border-radius:6px;padding:6px 9px;margin-bottom:6px;font-size:12.5px;cursor:pointer;color:var(--txt2)}
.quote .qc{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:260px}
.quote img{width:34px;height:34px;border-radius:6px;object-fit:cover}
.recalled{font-size:12.5px;color:var(--txt3);font-style:italic}
.edited{font-size:10.5px;color:var(--txt3);margin-left:6px}
.msg.me .edited{color:rgba(255,255,255,.7)}
.tipmsg{text-align:center;color:var(--txt3);font-size:12px}
.loadmore{text-align:center;color:var(--txt3);font-size:12px;padding:6px;cursor:pointer}
.loadmore:hover{color:var(--txt)}

/* composer */
#composer{border-top:1px solid var(--line);background:var(--panel);padding:8px 12px 12px}
.comp-toolbar{display:flex;align-items:center;gap:6px;margin-bottom:6px;flex-wrap:wrap}
.tb{height:30px;padding:0 10px;border-radius:8px;font-size:12.5px;color:var(--txt2);display:flex;align-items:center;gap:5px}
.tb:hover{background:var(--bg3);color:var(--txt)}
.tb.active{background:var(--accent);color:#fff}
.tb select{background:transparent;border:0;color:inherit;font-size:12.5px;outline:none}
.tb select option{color:#000}
.comp-quote{display:none}
.comp-row{display:flex;gap:8px;align-items:flex-end}
.comp-row textarea{flex:1;resize:none;background:var(--bg3);border:1px solid transparent;border-radius:12px;padding:10px 3px;padding-left:12px;padding-right:12px;max-height:150px;min-height:42px;outline:none;line-height:1.45}
.comp-row textarea:focus{border-color:var(--accent)}
.send-btn{height:42px;padding:0 20px;border-radius:12px;background:var(--accent);color:#fff;font-weight:600}
.send-btn:disabled{opacity:.5;cursor:not-allowed}
.upload-progress{font-size:12px;color:var(--txt3);padding:4px 2px}

/* members panel */
.panel-head{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--line);min-height:60px}
.panel-head .t{font-weight:600;flex:1}
.member{display:flex;gap:10px;align-items:center;padding:9px 12px;cursor:pointer;position:relative}
.member:hover{background:var(--bg3)}
.member .meta{flex:1;min-width:0}
.member .nm{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.member .sub{font-size:11px;color:var(--txt3)}
.role{font-size:10px;padding:1px 6px;border-radius:5px;font-weight:600}
.role.owner{background:#f59e0b;color:#3a2a00}
.role.admin{background:var(--accent);color:#fff}
.role.me{background:var(--ok);color:#05310f}
.gag{font-size:10px;color:var(--danger);border:1px solid var(--danger);border-radius:5px;padding:0 4px}

/* modal / overlays */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(2px);display:flex;align-items:center;justify-content:center;z-index:60;padding:18px}
.modal{background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);width:100%;max-width:440px;max-height:90vh;overflow:auto;animation:pop .18s ease}
.modal.wide{max-width:560px}
.modal-head{padding:16px 18px;border-bottom:1px solid var(--line);font-weight:600;display:flex;align-items:center;gap:8px}
.modal-body{padding:16px 18px;display:flex;flex-direction:column;gap:12px}
.modal-foot{padding:12px 18px;border-top:1px solid var(--line);display:flex;gap:10px;justify-content:flex-end}
label.fld{display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:var(--txt2)}
label.fld input,label.fld textarea,label.fld select{background:var(--bg3);border:1px solid var(--line);border-radius:10px;padding:9px 11px;outline:none;color:var(--txt)}
label.fld input:focus,label.fld textarea:focus{border-color:var(--accent)}
.btn{padding:9px 16px;border-radius:10px;background:var(--bg3);font-weight:600}
.btn:hover{filter:brightness(1.1)}
.btn.primary{background:var(--accent);color:#fff}
.btn.danger{background:var(--danger);color:#fff}
.btn.ghost{background:transparent;border:1px solid var(--line)}
.row{display:flex;gap:10px;align-items:center}
.grow{flex:1}
.switch{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px solid var(--line)}
.switch:last-child{border-bottom:0}
.muted{color:var(--txt3);font-size:12px}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{padding:5px 10px;border-radius:8px;background:var(--bg3);font-size:12.5px;border:1px solid var(--line)}
.chip.active{background:var(--accent);color:#fff;border-color:var(--accent)}

/* login */
#login{position:fixed;inset:0;background:radial-gradient(1200px 600px at 20% -10%,rgba(109,124,255,.25),transparent),radial-gradient(1000px 500px at 100% 0,rgba(139,92,246,.2),transparent),var(--bg);display:flex;align-items:center;justify-content:center;z-index:80;padding:18px}
.login-card{width:100%;max-width:400px;background:var(--panel);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:28px}
.login-logo{display:flex;align-items:center;gap:10px;justify-content:center;margin-bottom:6px}
.login-logo .mark{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,var(--accent),var(--accent2));display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff;font-size:20px}
.login-logo h1{font-size:19px}
.login-card p.desc{text-align:center;color:var(--txt3);font-size:12.5px;margin-bottom:18px}
.tabs{display:flex;background:var(--bg3);border-radius:11px;padding:4px;margin-bottom:16px}
.tabs button{flex:1;padding:8px;border-radius:8px;font-size:13px;color:var(--txt2)}
.tabs button.active{background:var(--accent);color:#fff}
.captcha{display:flex;gap:8px;align-items:center}
.captcha img{height:42px;border-radius:9px;cursor:pointer;background:#fff}
/* v2.13_fix 登录页视觉对齐：字段间距、输入框/验证码图/按钮等高、统一左对齐 */
#login .pane{display:flex;flex-direction:column;gap:11px}
#login .pane.hidden{display:none}
#login .fld{gap:7px}
#login .fld input,#login .fld textarea{min-height:40px}
#login .captcha img{height:40px;flex:0 0 auto}
#login .captcha input{min-height:40px}
#login .row{gap:8px}
#login .row .btn{padding:9px 12px;white-space:nowrap}
#login .pane .btn.primary{margin-top:2px}
#login .fld label, #login .fld{ text-align:left; }
.toast-wrap{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:200;display:flex;flex-direction:column;gap:8px;align-items:center}
.toast{background:#111827;color:#fff;border:1px solid var(--line);padding:10px 16px;border-radius:11px;font-size:13px;box-shadow:var(--shadow);animation:pop .18s}
.toast.err{background:#7f1d1d}.toast.ok{background:#14532d}
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.9);display:flex;align-items:center;justify-content:center;z-index:150}
.lightbox img{max-width:94vw;max-height:92vh;border-radius:8px}
.spin{width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;display:inline-block;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.empty-hint{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--txt3);gap:12px;text-align:center;padding:30px}
.empty-hint .big{font-size:44px;opacity:.5}

/* responsive */
.mobile-only{display:none}
@media(max-width:820px){
  .mobile-only{display:flex}
  #sidebar{position:absolute;inset:0;width:100%;flex-basis:100%;z-index:40;border-right:0}
  #app.chatting #sidebar{display:none}
  #members-panel{position:absolute;inset:0;width:100%;flex-basis:100%;z-index:45;border-left:0}
  .msg{max-width:90%}
  .imgmsg{max-width:220px}
}

/* ============================================================
   UI POLISH v2 — 重新打磨的视觉层（在原有深色 UI 基础上升级）
   ============================================================ */
:root,html[data-theme="dark"]{
  --bg:#0a0c11; --bg2:#101319; --bg3:#1a1e29; --panel:#12151c; --line:#242b3a;
  --txt:#edf0f7; --txt2:#a3acbe; --txt3:#6c758a;
  --accent:#6d7cff; --accent2:#a06bff; --bubble-me:#5a63d8; --bubble-other:#1e2331;
  --shadow:0 24px 70px rgba(0,0,0,.55); --shadow-sm:0 2px 12px rgba(0,0,0,.40);
  --radius:16px; --ease:cubic-bezier(.22,.61,.36,1);
}
html[data-theme="light"]{
  --bg:#eef1f7; --bg2:#ffffff; --bg3:#eceff6; --panel:#ffffff; --line:#e2e7f0;
  --txt:#171b23; --txt2:#596274; --txt3:#8b94a6;
  --accent:#5b67f0; --accent2:#8b5cf6; --bubble-other:#eef1f7; --bubble-me:#5b67f0;
  --shadow:0 24px 60px rgba(24,34,64,.14); --shadow-sm:0 2px 10px rgba(24,34,64,.07);
}
*{ -webkit-tap-highlight-color:transparent; }
body{ letter-spacing:.1px; }

/* 背景微光 */
#main{ background:radial-gradient(900px 520px at 82% -8%,rgba(109,124,255,.10),transparent 60%),radial-gradient(760px 460px at -6% 108%,rgba(160,107,255,.09),transparent 60%),var(--bg); }
#sidebar,#members-panel{ backdrop-filter:saturate(1.1); }

/* 侧栏头部：毛玻璃 + 更柔分隔 */
.side-head{ position:sticky;top:0;z-index:5;background:rgba(var(--panel-rgb),.82);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);padding:13px 14px;gap:8px; }
.side-head .me{ padding:5px 7px;border-radius:12px;transition:background .18s var(--ease); }
.side-head .me:hover{ background:var(--bg3); }
.me .nm{ font-size:14.5px;letter-spacing:.2px; }
.icon-btn{ width:34px;height:34px;border-radius:10px;color:var(--txt2);transition:background .16s var(--ease),color .16s var(--ease),transform .12s var(--ease); }
.icon-btn:hover{ background:var(--bg3);color:var(--txt);transform:translateY(-1px); }
.icon-btn:active{ transform:scale(.94); }

/* 搜索框 */
.search input{ background:var(--bg3);border:1px solid transparent;border-radius:12px;padding:10px 13px;font-size:13.5px;transition:border-color .16s var(--ease),background .16s var(--ease),box-shadow .16s var(--ease); }
.search input:focus{ border-color:var(--accent);background:var(--bg2);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.22); }

/* 会话列表 */
.conv-list{ padding:6px 8px; }
.conv{ padding:10px 11px;border-radius:13px;gap:11px;transition:background .16s var(--ease),transform .12s var(--ease); }
.conv:hover{ background:var(--bg3); }
.conv:active{ transform:scale(.99); }
.conv.active{ background:linear-gradient(90deg,rgba(var(--accent-rgb),.26),rgba(var(--accent2-rgb),.12)); }
.conv.active::before{ content:"";position:absolute;left:-8px;top:16%;bottom:16%;width:3px;border-radius:3px;background:var(--accent);box-shadow:0 0 10px var(--accent); }
.conv .nm{ font-size:14px;letter-spacing:.1px; }
.conv .last{ font-size:12.5px; }
.badge{ box-shadow:0 2px 8px rgba(239,68,68,.5); }

/* 聊天头 */
.chat-head{ position:sticky;top:0;z-index:6;background:rgba(var(--panel-rgb),.84);backdrop-filter:blur(14px);min-height:62px;padding:11px 14px; }
.chat-head .ttl .t{ font-size:15.5px;letter-spacing:.2px; }
.dot.on{ box-shadow:0 0 8px var(--ok); }

/* 消息区 */
#messages{ padding:22px 14px 12px;gap:13px; }
.msg{ animation:none; }
#messages .msg{ animation:pop .2s var(--ease); }
@keyframes pop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.msg .who{ font-size:11.5px;margin:0 5px 4px; }
.bubble{ border-radius:16px;padding:10px 13px;line-height:1.55;box-shadow:var(--shadow-sm); }
.msg:not(.me) .bubble{ border-bottom-left-radius:6px; }
.msg.me .bubble{ border-bottom-right-radius:6px;background:linear-gradient(135deg,var(--bubble-me),var(--bubble-me2)); }
html[data-theme="light"] .msg.me .bubble{ color:#fff; }
.msg .tools{ border-radius:11px;box-shadow:var(--shadow-sm);backdrop-filter:blur(8px); }
.imgmsg,.vidmsg{ transition:transform .18s var(--ease); }
.imgmsg:hover{ transform:scale(1.012); }

/* 输入区 */
#composer{ background:rgba(var(--panel-rgb),.88);backdrop-filter:blur(14px);padding:9px 14px 13px; }
.comp-row textarea{ border-radius:14px;padding:11px 14px;min-height:44px;transition:border-color .16s var(--ease),box-shadow .16s var(--ease),background .16s var(--ease);background:var(--bg3); }
.comp-row textarea:focus{ border-color:var(--accent);background:var(--bg2);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.2); }
.send-btn{ border-radius:14px;background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 6px 18px rgba(var(--accent-rgb),.4);transition:transform .12s var(--ease),box-shadow .16s var(--ease),opacity .16s; }
.send-btn:hover:not(:disabled){ transform:translateY(-1px);box-shadow:0 10px 24px rgba(var(--accent-rgb),.5); }
.send-btn:active:not(:disabled){ transform:scale(.97); }
.tb{ border-radius:9px;transition:background .15s var(--ease),color .15s var(--ease); }
.tb.active{ background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 4px 14px rgba(var(--accent-rgb),.38); }

/* 成员面板 */
.member{ border-radius:11px;margin:1px 6px;padding:9px 10px; }
.member:hover{ background:var(--bg3); }
.panel-head{ position:sticky;top:0;z-index:5;background:rgba(var(--panel-rgb),.84);backdrop-filter:blur(14px);min-height:62px; }

/* 弹窗 / 登录（玻璃拟态） */
.overlay{ background:rgba(6,8,14,.62);backdrop-filter:blur(6px); }
html[data-theme="light"] .overlay{ background:rgba(30,40,70,.30); }
.modal,.yhx-card{ border-radius:20px;box-shadow:var(--shadow);backdrop-filter:blur(18px); }
.modal{ animation:pop .22s var(--ease); }
.modal-head{ font-size:15.5px; }
.btn{ border-radius:11px;transition:filter .15s var(--ease),transform .12s var(--ease); }
.btn:active{ transform:scale(.97); }
.btn.primary,#login .btn.primary{ background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 6px 18px rgba(var(--accent-rgb),.36); }
.chip{ border-radius:9px;transition:.15s; }
.chip:hover{ border-color:var(--accent); }
.switch input[type=checkbox],.yhx-sw input[type=checkbox]{ width:38px;height:22px;-webkit-appearance:none;appearance:none;background:var(--bg3);border:1px solid var(--line);border-radius:20px;position:relative;cursor:pointer;transition:background .18s var(--ease); }
.switch input[type=checkbox]:checked,.yhx-sw input[type=checkbox]:checked{ background:var(--accent);border-color:var(--accent); }
.switch input[type=checkbox]::after,.yhx-sw input[type=checkbox]::after{ content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .18s var(--ease); }
.switch input[type=checkbox]:checked::after,.yhx-sw input[type=checkbox]:checked::after{ transform:translateX(16px); }

/* 登录页 */
#login{ background:radial-gradient(1100px 620px at 18% -12%,rgba(var(--accent-rgb),.3),transparent 60%),radial-gradient(1000px 560px at 104% 6%,rgba(var(--accent2-rgb),.26),transparent 60%),var(--bg); }
.login-card{ border-radius:22px;box-shadow:var(--shadow);backdrop-filter:blur(20px);background:rgba(var(--panel-rgb),.92);padding:30px 28px; }
.login-logo .mark{ box-shadow:0 8px 22px rgba(var(--accent-rgb),.45); }
.tabs{ border-radius:13px;padding:5px;gap:4px; }
.tabs button{ border-radius:9px;transition:.16s var(--ease); }
.tabs button.active{ background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 4px 14px rgba(var(--accent-rgb),.38); }
.toast{ border-radius:13px;backdrop-filter:blur(10px); }

/* 滚动条更细腻 */
::-webkit-scrollbar{ width:10px;height:10px; }
::-webkit-scrollbar-thumb{ background:rgba(var(--line-rgb),.88);border-radius:8px;border:3px solid transparent;background-clip:padding-box; }
::-webkit-scrollbar-thumb:hover{ background:var(--txt3);background-clip:padding-box; }

/* ============================================================
   UI POLISH v3 — 群成员/机器人、标签、错误提示等新增元素
   ============================================================ */
.panel-tabs{ margin:10px 12px 0;padding:4px; }
.panel-tabs .tb{ flex:1;justify-content:center;height:32px; }
.member .sub-lite{ font-size:11px;color:var(--txt3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:190px; }
.role.bot{ background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff; }
.tag-chip{ display:inline-block;color:#fff;padding:2px 9px;border-radius:8px;font-size:11.5px;margin:2px 4px 2px 0;box-shadow:var(--shadow-sm); }
.vip{ font-size:10.5px;background:linear-gradient(135deg,#f59e0b,#f97316);color:#3a2a00;padding:1px 6px;border-radius:6px;font-weight:700; }
.msg-error{ margin:8px 12px;padding:9px 13px;border-radius:12px;background:rgba(var(--danger-rgb),.14);border:1px solid rgba(var(--danger-rgb),.4);color:var(--danger);font-size:12.5px;line-height:1.5;word-break:break-all; }
.msg.sys .bubble{ background:transparent!important; }
.member .row{ display:flex;align-items:center;gap:6px;flex-wrap:wrap; }

/* ============================================================
   UI POLISH v4 — 修复 color-mix 兼容性、气泡/看板区分、玻璃质感、桌面适配
   （旧版大量使用 color-mix()，在部分安卓浏览器/Huawei Browser 上不支持，
     会导致自己发出的气泡退化成与他人相同颜色、看板与消息难以区分。此处用纯色/渐变兜底。）
   ============================================================ */
:root{
  --panel-glass: rgba(18,21,28,.74);
  --panel-glass-strong: rgba(18,21,28,.56);
  --board-bg: linear-gradient(90deg, rgba(109,124,255,.16), rgba(109,124,255,.04));
  --board-line: rgba(109,124,255,.32);
}
/* —— 颜色三元组：用于替代 color-mix()，兼容老安卓/Huawei 浏览器 —— */
:root{
  --panel-rgb: 23,26,34; --accent-rgb: 109,124,255; --accent2-rgb: 139,92,246;
  --line-rgb: 38,43,57; --danger-rgb: 239,68,68;
  --bubble-me2: #8b5cf6; --bubble-me-fg: #ffffff; --bubble-me-link: #eaf1ff;
  --bubble-other-fg: var(--txt); --bubble-other-link: var(--accent);
}
html[data-theme="light"]{
  --panel-rgb: 255,255,255; --accent-rgb: 88,101,242; --line-rgb: 227,231,238;
  --bubble-me-fg:#ffffff;
}
html[data-theme="light"]{
  --panel-glass: rgba(255,255,255,.78);
  --panel-glass-strong: rgba(255,255,255,.62);
  --board-bg: linear-gradient(90deg, rgba(91,103,240,.12), rgba(91,103,240,.03));
  --board-line: rgba(91,103,240,.28);
}
/* 用不依赖 color-mix 的纯色覆盖旧视觉 */
#main{ background:radial-gradient(1000px 560px at 84% -10%,rgba(109,124,255,.10),transparent 60%),radial-gradient(820px 480px at -6% 110%,rgba(160,107,255,.09),transparent 60%),var(--bg); }
.icon-btn:hover{ transform:none; }
.conv.active{ background:linear-gradient(90deg,rgba(109,124,255,.20),rgba(139,92,246,.10)); }
.conv.active::before{ background:var(--accent); box-shadow:0 0 10px var(--accent); }
.send-btn{ background:linear-gradient(135deg,var(--accent),var(--accent2)); box-shadow:0 6px 16px rgba(0,0,0,.28); }
.send-btn:hover:not(:disabled){ box-shadow:0 10px 22px rgba(0,0,0,.34); }
.tb.active,.btn.primary,#login .btn.primary,.tabs button.active,.yhx-segbtn.on,.yhx-btn.pri{ background:linear-gradient(135deg,var(--accent),var(--accent2)); box-shadow:none; }
.search input:focus{ border-color:var(--accent); background:var(--bg2); box-shadow:0 0 0 3px rgba(109,124,255,.20); }
.comp-row textarea:focus{ border-color:var(--accent); background:var(--bg2); box-shadow:0 0 0 3px rgba(109,124,255,.18); }
.msg-error{ background:rgba(239,68,68,.12); border:1px solid rgba(239,68,68,.36); }

/* —— 消息气泡明确区分（自己=主题色渐变，他人=中性色）—— */
.msg:not(.me) .bubble{ background:var(--bubble-other); color:var(--txt); }
.msg.me .bubble{ background:linear-gradient(135deg,var(--bubble-me,#5b63d6),var(--accent2)); color:#fff; }
html[data-theme="light"] .msg:not(.me) .bubble{ background:#ffffff; border:1px solid var(--line); }
html[data-theme="light"] .msg.me .bubble{ color:#fff; }
.msg .who{ color:var(--txt3); }

/* —— 群看板：独立卡片，与消息明显区分 —— */
#boards{ margin:8px 12px 0; display:flex; flex-direction:column; gap:6px; }
.board-card{ border:1px solid var(--board-line); border-left:3px solid var(--accent); border-radius:12px; overflow:hidden; background:var(--board-bg); }
.board-card .bh{ display:flex; align-items:center; gap:8px; padding:8px 12px; cursor:pointer; font-size:13px; font-weight:600; color:var(--txt); }
.board-card .bh .arw{ margin-left:auto; opacity:.7; }
.board-card .bb{ display:none; padding:4px 12px 12px; font-size:13.5px; border-top:1px solid rgba(127,127,127,.16); max-height:220px; overflow:auto; }
.board-card.open .bb{ display:block; }

/* —— 玻璃质感选项 —— */
html[data-glass="off"] .side-head,html[data-glass="off"] .chat-head,html[data-glass="off"] .panel-head,html[data-glass="off"] #composer{ background:var(--panel); backdrop-filter:none; -webkit-backdrop-filter:none; }
html[data-glass="off"] .modal,html[data-glass="off"] .yhx-card{ backdrop-filter:none; -webkit-backdrop-filter:none; }
html[data-glass="blur"] .side-head,html[data-glass="blur"] .chat-head,html[data-glass="blur"] .panel-head{ background:var(--panel-glass); }
html[data-glass="blur"] #composer{ background:var(--panel-glass); }
html[data-glass="liquid"] .side-head,html[data-glass="liquid"] .chat-head,html[data-glass="liquid"] .panel-head{ background:var(--panel-glass-strong); backdrop-filter:blur(22px) saturate(1.7); -webkit-backdrop-filter:blur(22px) saturate(1.7); box-shadow:inset 0 -1px 0 rgba(255,255,255,.06); }
html[data-glass="liquid"] #composer{ background:var(--panel-glass-strong); backdrop-filter:blur(22px) saturate(1.7); -webkit-backdrop-filter:blur(22px) saturate(1.7); }
html[data-glass="liquid"] .modal,html[data-glass="liquid"] .yhx-card{ backdrop-filter:blur(26px) saturate(1.7); -webkit-backdrop-filter:blur(26px) saturate(1.7); box-shadow:inset 0 1px 0 rgba(255,255,255,.08), var(--shadow); }

/* —— 圆角选项 —— */
html[data-radius="compact"] .bubble,html[data-radius="compact"] .conv,html[data-radius="compact"] .yhx-card,html[data-radius="compact"] .modal,html[data-radius="compact"] .board-card{ border-radius:10px !important; }
html[data-radius="round"] .bubble,html[data-radius="round"] .conv,html[data-radius="round"] .yhx-card,html[data-radius="round"] .modal,html[data-radius="round"] .board-card{ border-radius:22px !important; }

/* —— 设置：分段选择 —— */
.yhx-seg{ display:flex; gap:6px; margin:6px 0 10px; flex-wrap:wrap; }
.yhx-segbtn{ padding:8px 14px; border-radius:10px; border:1px solid var(--line); background:var(--bg3); color:var(--txt2); font-size:13px; cursor:pointer; }
.yhx-segbtn.on{ color:#fff; border-color:transparent; }

/* —— 文章 / 评论 —— */
.yhx-post-body img{ max-width:100%; height:auto; border-radius:10px; cursor:zoom-in; }
.comment-box{ display:flex; flex-direction:column; }
.comment{ display:flex; gap:10px; padding:9px 8px; border-radius:12px; align-items:flex-start; }
.comment:hover{ background:var(--bg3); }
.comment .nm{ font-weight:600; font-size:13.5px; }
.comment .cbody{ font-size:13.5px; white-space:pre-wrap; margin:2px 0; line-height:1.5; }
.comment.nested{ border-left:2px solid var(--line); margin-left:10px; }
.comment .yhx-btn.mini{ padding:3px 10px; font-size:12px; align-self:flex-start; }
.yhx-btn.poke{ }
.yhx-btn.poke.on{ background:linear-gradient(135deg,var(--accent),var(--accent2)); color:#fff; border-color:transparent; }
.img-failed{ display:flex; align-items:center; justify-content:center; padding:14px 16px; border-radius:10px; background:var(--bg3); color:var(--txt3); font-size:12.5px; }
.a2ui{ display:flex; flex-direction:column; gap:6px; }
.a2ui-text{ font-size:13.5px; }
.a2ui-row{ display:flex; gap:6px; flex-wrap:wrap; }
.md-img{ max-width:100%; border-radius:10px; cursor:zoom-in; display:block; margin:4px 0; }
/* Markdown 区块内的换行由标签控制，避免被气泡的 pre-wrap 放大成空行 */
.msg .bubble .md,.msg .bubble .md *{ white-space:normal; }
.md pre,.md pre code{ white-space:pre; }
.md code{ white-space:pre-wrap; }
.md h1,.md h2,.md h3,.md h4,.md h5,.md h6{ margin:.5em 0 .35em; line-height:1.35; }
.md h1{ font-size:1.3em; }.md h2{ font-size:1.18em; }
.md h3,.md h4,.md h5,.md h6{ font-size:1.05em; }
.md p{ margin:.35em 0; }
.md ul,.md ol{ margin:.35em 0 .35em 1.4em; }
.md li{ margin:.12em 0; }
.md blockquote{ border-left:3px solid var(--accent); padding:2px 0 2px 10px; margin:.4em 0; color:var(--txt2); }
.md blockquote blockquote{ margin:.2em 0; }
.md hr{ border:0; border-top:1px solid var(--line); margin:.7em 0; }
.md pre{ background:#0b0d12; border:1px solid var(--line); border-radius:10px; padding:11px; overflow:auto; margin:.5em 0; }
html[data-theme="light"] .md pre{ background:#f6f8fc; }
.md pre code{ background:none; padding:0; }
.md img{ max-width:100%; border-radius:10px; }

/* —— 桌面端适配 —— */
@media (min-width:1100px){
  #sidebar{ width:340px; flex-basis:340px; }
  #members-panel{ width:320px; flex-basis:320px; }
  .msg{ max-width:min(760px,74%); }
  #messages{ padding:24px 22px 14px; }
  .yhx-card.wide{ max-width:900px; }
}
@media (min-width:1500px){
  #sidebar{ width:380px; flex-basis:380px; }
  #messages,#boards{ max-width:1180px; margin-left:auto; margin-right:auto; width:100%; }
  #boards{ margin-top:10px; }
}
@media (min-width:1100px) and (max-width:1500px){
  #boards{ margin-left:auto; margin-right:auto; max-width:1100px; }
}
/* 触屏设备不做 hover 位移 */
@media (hover:none){ .icon-btn:hover{ transform:none; } .imgmsg:hover{ transform:none; } }

/* ============================================================
   UI POLISH v5 — 真实的毛玻璃/液态玻璃、紧凑看板入口、看板手风琴
   ============================================================ */
/* 把彩色氛围背景放到 #app（面板之下），这样玻璃面板才有内容可模糊 */
#app{
  background:
    radial-gradient(1100px 640px at 12% -12%, rgba(109,124,255,.26), transparent 58%),
    radial-gradient(980px 560px at 104% 2%, rgba(160,107,255,.20), transparent 58%),
    radial-gradient(900px 620px at 46% 122%, rgba(34,197,94,.10), transparent 62%),
    var(--bg);
}
#main{ background:transparent; }
#sidebar,#members-panel{ background:var(--panel); }

/* —— 简洁（无模糊，最流畅）—— */
html[data-glass="off"] #sidebar,html[data-glass="off"] #members-panel{ background:var(--panel); }
html[data-glass="off"] .side-head,html[data-glass="off"] .chat-head,html[data-glass="off"] .panel-head,html[data-glass="off"] #composer{ background:var(--panel); }

/* —— 毛玻璃 —— */
html[data-glass="blur"] #sidebar,html[data-glass="blur"] #members-panel{
  background:rgba(18,21,28,.72); -webkit-backdrop-filter:blur(18px) saturate(1.35); backdrop-filter:blur(18px) saturate(1.35);
}
html[data-glass="blur"] .side-head,html[data-glass="blur"] .chat-head,html[data-glass="blur"] .panel-head{
  background:rgba(18,21,28,.62); -webkit-backdrop-filter:blur(16px) saturate(1.35); backdrop-filter:blur(16px) saturate(1.35);
}
html[data-glass="blur"] #composer{ background:rgba(18,21,28,.62); -webkit-backdrop-filter:blur(16px) saturate(1.35); backdrop-filter:blur(16px) saturate(1.35); }
html[data-glass="blur"] .modal,html[data-glass="blur"] .yhx-card{ -webkit-backdrop-filter:blur(18px) saturate(1.3); backdrop-filter:blur(18px) saturate(1.3); }
html[data-theme="light"][data-glass="blur"] #sidebar,html[data-theme="light"][data-glass="blur"] #members-panel{ background:rgba(255,255,255,.72); }
html[data-theme="light"][data-glass="blur"] .side-head,html[data-theme="light"][data-glass="blur"] .chat-head,html[data-theme="light"][data-glass="blur"] .panel-head,html[data-theme="light"][data-glass="blur"] #composer{ background:rgba(255,255,255,.64); }

/* —— 液态玻璃（更强模糊 + 高饱和 + 高光边）—— */
html[data-glass="liquid"] #sidebar,html[data-glass="liquid"] #members-panel{
  background:rgba(18,21,28,.44); -webkit-backdrop-filter:blur(36px) saturate(2); backdrop-filter:blur(36px) saturate(2);
  border-right:1px solid rgba(255,255,255,.10); border-left:1px solid rgba(255,255,255,.06);
}
html[data-glass="liquid"] .side-head,html[data-glass="liquid"] .chat-head,html[data-glass="liquid"] .panel-head{
  background:rgba(18,21,28,.34); -webkit-backdrop-filter:blur(34px) saturate(2.05); backdrop-filter:blur(34px) saturate(2.05);
  border-bottom:1px solid rgba(255,255,255,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
}
html[data-glass="liquid"] #composer{
  background:rgba(18,21,28,.34); -webkit-backdrop-filter:blur(34px) saturate(2.05); backdrop-filter:blur(34px) saturate(2.05);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09);
}
html[data-glass="liquid"] .modal,html[data-glass="liquid"] .yhx-card{
  background:rgba(18,21,28,.56); -webkit-backdrop-filter:blur(30px) saturate(1.9); backdrop-filter:blur(30px) saturate(1.9);
  border:1px solid rgba(255,255,255,.12); box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 24px 70px rgba(0,0,0,.55);
}
html[data-theme="light"][data-glass="liquid"] #sidebar,html[data-theme="light"][data-glass="liquid"] #members-panel{ background:rgba(255,255,255,.5); }
html[data-theme="light"][data-glass="liquid"] .side-head,html[data-theme="light"][data-glass="liquid"] .chat-head,html[data-theme="light"][data-glass="liquid"] .panel-head,html[data-theme="light"][data-glass="liquid"] #composer{ background:rgba(255,255,255,.42); box-shadow:inset 0 1px 0 rgba(255,255,255,.6); }
html[data-theme="light"][data-glass="liquid"] .modal,html[data-theme="light"][data-glass="liquid"] .yhx-card{ background:rgba(255,255,255,.68); }

/* —— 紧凑看板入口（只占一行，不再霸屏）—— */
.boards-strip{
  display:flex; align-items:center; gap:8px; margin:8px 12px 0; padding:7px 12px;
  border-radius:11px; cursor:pointer; font-size:13px; font-weight:600; color:var(--txt);
  border:1px solid var(--board-line); border-left:3px solid var(--accent); background:var(--board-bg);
  transition:filter .15s var(--ease), transform .12s var(--ease);
}
.boards-strip:hover{ filter:brightness(1.1); }
.boards-strip:active{ transform:scale(.995); }
.boards-strip .bc{ background:var(--accent); color:#fff; border-radius:10px; font-size:11px; padding:0 7px; line-height:17px; font-weight:600; }
.boards-strip .ba{ margin-left:auto; color:var(--txt2); font-weight:400; font-size:12.5px; }
html.yhx-no-boards .boards-strip{ display:none !important; }

/* —— 看板手风琴 —— */
.yhx-board .bb{ display:none; }
.yhx-board.open .bb{ display:block; max-height:54vh; overflow:auto; }
.yhx-board .bh .arw{ margin-left:auto; }

/* —— 桌面端：让看板入口同样居中 —— */
@media (min-width:1500px){
  #messages{ max-width:1180px; margin-left:auto; margin-right:auto; width:100%; }
  .boards-strip{ max-width:1180px; margin-left:auto; margin-right:auto; margin-top:10px; }
}
@media (min-width:1100px) and (max-width:1499px){
  .boards-strip{ max-width:1100px; margin-left:auto; margin-right:auto; }
}

/* ================= 机器人指令栏（输入框上方） ================= */
#instr-bar{
  margin:0 0 8px; padding:6px 8px 8px; border:1px solid var(--line); border-radius:12px;
  background:var(--bg3); display:flex; flex-direction:column; gap:6px; min-width:0;
}
#instr-bar.collapsed .instr-scroll{ display:none; }
.instr-head{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--txt2); min-width:0; }
.instr-head .instr-title{ font-weight:600; color:var(--txt); }
.instr-head .instr-sub{ color:var(--txt3); font-size:11.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.instr-head .grow{ flex:1; }
.instr-head .icon-btn{ width:24px; height:24px; font-size:13px; line-height:1; border-radius:7px; opacity:.8; }
#instr-bar.collapsed .instr-head .icon-btn{ transform:rotate(-90deg); }
.instr-scroll{
  display:flex; gap:7px; overflow-x:auto; overflow-y:hidden; padding-bottom:2px;
  scrollbar-width:thin; -webkit-overflow-scrolling:touch; min-width:0;
}
.instr-scroll::-webkit-scrollbar{ height:5px; }
.instr-chip{
  flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; max-width:260px;
  padding:6px 11px; border-radius:999px; font-size:12.5px; line-height:1.35;
  background:var(--panel); border:1px solid var(--line); color:var(--txt);
  transition:filter .15s var(--ease), transform .12s var(--ease), border-color .15s;
}
.instr-chip:hover{ filter:brightness(1.12); border-color:var(--accent); }
.instr-chip:active{ transform:scale(.97); }
.instr-chip .ic-name{ font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.instr-chip .ic-bot{ color:var(--accent); font-size:11.5px; white-space:nowrap; }
.instr-chip .ic-tag{ font-size:10.5px; padding:0 5px; border-radius:6px; background:rgba(109,124,255,.16); color:var(--accent); }
.instr-chip.menu{ background:linear-gradient(135deg,rgba(139,92,246,.16),rgba(109,124,255,.12)); }
.instr-chip.cmd{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset; }
.instr-chip.more{ color:var(--txt3); border-style:dashed; }
.instr-empty{ color:var(--txt3); font-size:12px; padding:2px 2px; }

/* 指令表单弹窗 */
.instr-form{ display:flex; flex-direction:column; gap:12px; }
.instr-form .if-item{ display:flex; flex-direction:column; gap:6px; }
.instr-form .if-title{ font-size:13px; font-weight:600; color:var(--txt); }
.instr-form input[type=text], .instr-form textarea, .instr-form select{
  width:100%; background:var(--bg3); border:1px solid var(--line); border-radius:9px;
  padding:8px 10px; font-size:13.5px; outline:none;
}
.instr-form textarea{ min-height:72px; resize:vertical; }
.instr-form .if-opts{ display:flex; flex-wrap:wrap; gap:7px; }
.instr-form .if-opt{
  padding:5px 11px; border-radius:999px; font-size:12.5px; border:1px solid var(--line);
  background:var(--panel); cursor:pointer; user-select:none;
}
.instr-form .if-opt.on{ background:var(--accent); border-color:var(--accent); color:#fff; }
.instr-form .if-sw{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.instr-form .if-sw .sw-box{ width:44px; height:24px; border-radius:999px; background:var(--line); position:relative; transition:background .18s; flex:0 0 auto; }
.instr-form .if-sw .sw-box::after{ content:''; position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; background:#fff; transition:left .18s; }
.instr-form .if-sw.on .sw-box{ background:var(--accent); }
.instr-form .if-sw.on .sw-box::after{ left:22px; }
.instr-form .if-preview{ font-size:11.5px; color:var(--txt3); white-space:pre-wrap; word-break:break-all; }

/* ================= 机器人设置（动态表单） ================= */
.yhx-form-item{ padding:10px 0; border-bottom:1px solid var(--line); }
.yhx-form-item:last-child{ border-bottom:0; }
.yhx-form-item > .lbl{ font-size:13px; font-weight:600; margin-bottom:7px; word-break:break-word; }
.yhx-form-item .opts{ display:flex; flex-wrap:wrap; gap:7px; }
.yhx-form-item .opt{ padding:5px 11px; border-radius:999px; font-size:12.5px; border:1px solid var(--line); background:var(--panel); cursor:pointer; user-select:none; }
.yhx-form-item .opt.on{ background:var(--accent); border-color:var(--accent); color:#fff; }
.yhx-form-item input[type=text], .yhx-form-item textarea{ width:100%; background:var(--bg3); border:1px solid var(--line); border-radius:9px; padding:8px 10px; font-size:13.5px; outline:none; }
.yhx-form-item textarea{ min-height:70px; resize:vertical; }
.yhx-form-item .sub{ color:var(--txt3); font-size:11.5px; }

/* ================= 消息内按钮（任意消息类型） ================= */
.bubble .a2ui{ display:flex; flex-direction:column; gap:6px; }
.a2ui-text{ font-size:13px; line-height:1.5; white-space:pre-wrap; word-break:break-word; }
.a2ui-row{ display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.chip.dead{ opacity:.55; }
.msg .bubble .chips .chip.active{ background:var(--accent); color:#fff; border-color:var(--accent); }

/* ================= 视频 ================= */
.vidmsg{ max-width:min(360px,70vw); width:auto; border-radius:11px; display:block; background:#000; }
.msg.me .vidmsg{ max-width:min(360px,66vw); }
.vid-fallback{ font-size:12.5px; color:var(--txt2); padding:6px 8px; border:1px dashed var(--line); border-radius:9px; }

/* 移动端微调 */
@media (max-width:700px){
  .instr-chip{ max-width:210px; padding:5px 10px; font-size:12px; }
  #instr-bar{ margin-bottom:6px; padding:5px 7px 7px; }
  .instr-head .instr-sub{ display:none; }
}

/* ============================================================
   UI POLISH v6 — 指令栏显示方式 + 气泡/链接配色（全部不依赖 color-mix）
   ============================================================ */

/* —— 机器人指令栏：三种显示方式（标准 / 小按钮 / 关闭） —— */
html[data-instr="off"] #instr-bar{ display:none !important; }
html[data-instr="compact"] #instr-bar{ border:0; background:transparent; padding:0 0 6px; margin:0 0 2px; gap:0; }
html[data-instr="compact"] .instr-head{ display:none; }
html[data-instr="compact"] .instr-scroll{ gap:5px; }
html[data-instr="compact"] .instr-chip{ padding:3px 9px; font-size:11.5px; border-radius:8px; max-width:170px; min-height:0; }
html[data-instr="compact"] .instr-chip .ic-tag{ display:none; }
html[data-instr="compact"] .instr-chip .ic-bot{ font-size:10.5px; }
html[data-instr="compact"] .instr-chip .ic-name{ max-width:110px; }
/* 紧凑模式下取消“收起”，避免只剩一个标题行 */
html[data-instr="compact"] #instr-bar.collapsed .instr-scroll{ display:flex; }
/* 该群没有指令时，紧凑/关闭模式不占位 */
html[data-instr="compact"] #instr-bar.no-cmd{ display:none !important; }
/* 标准模式：更大的点击区与字号（原来偏小） */
.instr-chip{ padding:8px 13px; font-size:13.5px; border-radius:999px; min-height:34px; }
.instr-chip .ic-name{ font-size:13.5px; }
.instr-chip .ic-bot{ font-size:12px; }
.instr-chip .ic-tag{ font-size:11px; }
.instr-head{ font-size:12.5px; }
#instr-bar{ padding:7px 9px 9px; }

/* —— 消息气泡配色（默认跟随主题，可在设置中自定义） —— */
html[data-theme] .msg:not(.me) .bubble:not(.plain):not(.media){ background:var(--bubble-other); color:var(--bubble-other-fg); }
html[data-theme="light"] .msg:not(.me) .bubble:not(.plain):not(.media){ background:var(--bubble-other); border:1px solid var(--line); }
html[data-theme] .msg.me .bubble:not(.plain):not(.media){ background:linear-gradient(135deg,var(--bubble-me),var(--bubble-me2)); color:var(--bubble-me-fg); }
html[data-theme] .msg.me .bubble .edited,
html[data-theme] .msg.me .bubble .md del{ color:var(--bubble-me-fg); opacity:.72; }

/* —— 链接配色：自己气泡内高对比，他人气泡内用主色 —— */
html[data-theme] .msg.me .bubble a,
html[data-theme] .msg.me .bubble .md a,
html[data-theme] .msg.me .bubble .yh-yunhu-link{ color:var(--bubble-me-link); text-decoration:underline; text-underline-offset:2px; }
html[data-theme] .msg:not(.me) .bubble a,
html[data-theme] .msg:not(.me) .bubble .md a{ color:var(--bubble-other-link); }
html[data-theme] .msg.me .bubble .yh-at{ color:var(--bubble-me-link); font-weight:600; }
html[data-theme] .msg.me .bubble code{ background:rgba(255,255,255,.16); color:var(--bubble-me-fg); }

/* 设置里的自定义气泡配色控件 */
.yhx-colorline{ display:flex; align-items:center; gap:10px; padding:8px 0 2px; }
.yhx-colorline .lbl{ font-size:13.5px; }
.yhx-colorline input[type=color]{ width:42px; height:30px; padding:0; border:1px solid var(--line); border-radius:8px; background:var(--bg3); }

/* ============================================================
   UI POLISH v7 — 会话置顶（列表置顶 / 顶部横滑置顶条）+ 会话操作
   ============================================================ */
#pinned-bar{
  display:flex; gap:9px; padding:9px 11px 7px; overflow-x:auto; overflow-y:hidden;
  border-bottom:1px solid var(--line); scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
#pinned-bar.hidden{ display:none !important; }
#pinned-bar::-webkit-scrollbar{ display:none; }
.pin-item{ flex:0 0 auto; width:58px; display:flex; flex-direction:column; align-items:center; gap:5px; cursor:pointer; }
.pin-item .avatar{ width:42px; height:42px; border-radius:13px; }
.pin-item .pin-ico{ width:42px; height:42px; border-radius:13px; background:var(--bg3); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:17px; color:var(--txt2); }
.pin-item .pin-name{ font-size:11px; color:var(--txt2); max-width:58px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pin-item:hover .pin-name{ color:var(--txt); }
.conv .nm span.pin-ico{ display:inline; width:auto; height:auto; background:none; border:0; margin-right:3px; font-size:11px; vertical-align:1px; }
.conv .more{
  margin-left:auto; flex:0 0 auto; width:26px; height:26px; border-radius:8px; color:var(--txt3);
  opacity:0; transition:opacity .15s, background .15s; font-size:15px; line-height:1;
}
.conv:hover .more{ opacity:.75; }
.conv .more:hover{ background:var(--bg3); opacity:1; }
@media (hover:none){ .conv .more{ opacity:.55; } }
.conv-menu{ display:flex; flex-direction:column; }
.conv-menu button{ text-align:left; padding:12px; border-radius:10px; font-size:14px; color:var(--txt); }
.conv-menu button:hover{ background:var(--bg3); }
.pinrow{ display:flex; align-items:center; gap:10px; padding:8px 0; }
.pinrow .nm{ flex:1; min-width:0; font-size:13.5px; }
.pinrow .chip{ cursor:pointer; }

/* —— A2UI 原始数据展开 / 分隔线 —— */
.a2ui-hr{ height:1px; background:var(--line); margin:6px 0; }
.a2ui-raw{ margin-top:8px; }
.a2ui-raw summary{ cursor:pointer; font-size:11.5px; color:var(--txt3); padding:3px 0; }
.a2ui-raw-body{
  font-family:ui-monospace,Menlo,monospace; font-size:11.5px; line-height:1.55; white-space:pre-wrap;
  word-break:break-all; max-height:220px; overflow:auto; background:var(--bg3);
  border:1px solid var(--line); border-radius:9px; padding:8px 10px; color:var(--txt2);
}

/* ============================================================
   UI POLISH v8 — 群标签 / 消息操作入口 / 侧栏按钮位置 / 矢量图标
   ============================================================ */
.icon-btn svg, .tb svg, .send-btn svg, .yhx-btn svg{ display:block; pointer-events:none; }
.ic-lb{ font-size:12.5px; margin-left:3px; }

/* 侧边栏：顶部 / 底部功能按钮 */
.head-actions{ display:flex; align-items:center; gap:1px; margin-left:auto; }
.side-bottom{
  display:flex; align-items:center; justify-content:space-around; gap:6px;
  padding:7px 10px calc(7px + env(safe-area-inset-bottom, 0px));
  border-top:1px solid var(--line); background:var(--panel); flex:0 0 auto;
}
.side-bottom .icon-btn{ width:38px; height:38px; border-radius:11px; }

/* 群标签（成员头衔） */
.who .tags{ display:inline-flex; align-items:center; gap:4px; margin-left:6px; vertical-align:middle; max-width:52%; overflow:hidden; }
.tags .tag-item{
  font-size:10.5px; line-height:16px; padding:0 6px; border-radius:6px; white-space:nowrap;
  color:var(--tag-color); background:rgba(255,255,255,.10); border:1px solid var(--tag-color);
  max-width:96px; overflow:hidden; text-overflow:ellipsis;
}
.tags-chip .tag-item{ color:#fff; background:var(--tag-color); border-color:transparent; }
.tags-mini .tag-item{ font-size:10px; padding:0 5px; border-radius:5px; }
.tags-text .tag-item{ border:0; background:none; padding:0; font-size:11px; }
.tags .tag-more{ font-size:10px; color:var(--txt3); flex:0 0 auto; }

/* 消息操作：默认完全隐藏，只在「悬停 / 长按 / 点选该条消息」时出现，避免常驻工具条突兀 */
.msg{ cursor:default; }
.msg.sel > .body{ background:rgba(var(--accent-rgb),.08); }
.msg .tools{ opacity:0; pointer-events:none; }
.msg:hover .tools, .msg.sel .tools{ opacity:1; pointer-events:auto; }
.msg .tools button{ display:inline-flex; align-items:center; justify-content:center; }
.msg .tools button .t-ic{ font-style:normal; font-size:13px; line-height:1; }
.msg .tools button svg{ display:block; }
@media (hover:none){
  .msg:hover .tools{ opacity:0; pointer-events:none; }
  .msg.sel .tools{ opacity:1; pointer-events:auto; }
}
/* 长按菜单里的图标 */
.conv-menu button{ display:flex; align-items:center; gap:9px; }
.conv-menu button svg{ opacity:.85; }

#chat{ position:relative; }

/* @ 昵称高亮 */
.yh-at{ color:var(--accent); font-weight:600; }

/* ================= @ 提及面板 ================= */
#composer{ position:relative; }
#mention-pop{
  position:absolute; left:10px; right:10px; bottom:calc(100% - 2px); z-index:40;
  display:flex; flex-direction:column; max-height:min(46vh,360px);
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  box-shadow:0 18px 50px rgba(0,0,0,.42); overflow:hidden;
  animation:mpIn .14s var(--ease, ease);
}
@keyframes mpIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
#mention-pop.hidden{ display:none; }
.mp-head{ display:flex; align-items:center; gap:8px; padding:9px 10px; border-bottom:1px solid var(--line); }
.mp-all{ font-size:12.5px; color:var(--accent); background:rgba(var(--accent-rgb),.12); border:0; padding:5px 10px; border-radius:8px; cursor:pointer; flex:0 0 auto; }
.mp-tabs{ display:flex; gap:4px; margin:0 auto; }
.mp-tab{ font-size:13px; color:var(--txt3); background:transparent; border:0; padding:5px 12px; border-radius:8px; cursor:pointer; }
.mp-tab.active{ color:var(--txt); background:var(--bg3); font-weight:600; }
.mp-ok{ font-size:12.5px; font-weight:600; color:#fff; background:var(--accent); border:0; padding:6px 13px; border-radius:8px; cursor:pointer; flex:0 0 auto; }
.mp-x{ width:26px; height:26px; border:0; background:transparent; color:var(--txt3); border-radius:7px; cursor:pointer; flex:0 0 auto; }
.mp-x:hover{ background:var(--bg3); color:var(--txt); }
.mp-search{ padding:8px 10px; }
.mp-search input{ width:100%; box-sizing:border-box; background:var(--bg3); border:1px solid transparent; border-radius:9px; padding:8px 11px; font-size:13px; color:var(--txt); outline:none; }
.mp-search input:focus{ border-color:var(--accent); }
.mp-list{ overflow-y:auto; padding:0 6px 8px; flex:1; }
.mp-item{ display:flex; align-items:center; gap:9px; padding:7px 8px; border-radius:9px; cursor:pointer; }
.mp-item:hover{ background:var(--bg3); }
.mp-item.on{ background:rgba(var(--accent-rgb),.12); }
.mp-item input[type=checkbox]{ width:16px; height:16px; accent-color:var(--accent); flex:0 0 auto; }
.mp-item .avatar{ width:30px; height:30px; font-size:12px; flex:0 0 auto; }
.mp-name{ min-width:0; flex:1; }
.mp-name .n{ font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mp-name .s{ font-size:11px; color:var(--txt3); }
.mp-tag{ font-size:10px; color:var(--txt3); background:var(--bg3); border-radius:5px; padding:1px 5px; margin-left:4px; }
.mp-empty{ padding:18px; text-align:center; color:var(--txt3); font-size:13px; }

/* ================= 多选消息 ================= */
#multi-bar{
  position:absolute; left:50%; transform:translateX(-50%); bottom:96px; z-index:60;
  display:flex; align-items:center; gap:6px; padding:8px 10px; max-width:calc(100% - 16px); overflow-x:auto;
  background:rgba(var(--panel-rgb),.96); backdrop-filter:blur(14px);
  border:1px solid var(--line); border-radius:14px; box-shadow:0 12px 34px rgba(0,0,0,.34);
  animation:mpIn .16s ease;
}
#multi-bar.hidden{ display:none; }
#multi-bar .mb-count{ font-size:12.5px; color:var(--txt2); margin-right:4px; white-space:nowrap; }
#multi-bar .mb-btn{ font-size:12.5px; padding:7px 11px; border-radius:9px; border:1px solid var(--line); background:var(--bg3); color:var(--txt); cursor:pointer; white-space:nowrap; }
#multi-bar .mb-btn:hover{ border-color:var(--accent); color:var(--accent); }
#multi-bar .mb-btn.pri{ background:var(--accent); border-color:var(--accent); color:#fff; }
html.multi-mode #messages{ padding-bottom:64px; }
html.multi-mode .msg{ cursor:pointer; }
html.multi-mode .msg .tools{ display:none !important; }
.msg .pick-dot{
  position:absolute; left:-2px; top:50%; transform:translateY(-50%);
  width:20px; height:20px; border-radius:50%; border:2px solid var(--line);
  background:var(--panel); display:none; z-index:5;
}
html.multi-mode .msg .pick-dot{ display:block; }
html.multi-mode .msg.me .pick-dot{ left:auto; right:-2px; }
.msg.picked .pick-dot{ background:var(--accent); border-color:var(--accent); }
.msg.picked .pick-dot::after{ content:''; position:absolute; left:5px; top:2.5px; width:6px; height:10px; border:2px solid #fff; border-top:0; border-left:0; transform:rotate(42deg); }
.msg.picked .bubble{ outline:2px solid rgba(var(--accent-rgb),.55); outline-offset:2px; }

/* ================= 气泡样式（可在设置中切换） ================= */
html[data-bubble="tail"] .bubble{ box-shadow:0 2px 6px rgba(0,0,0,.12); }
html[data-bubble="tail"] .msg:not(.me) .bubble:not(.media):not(.plain){ border-top-left-radius:4px; }
html[data-bubble="tail"] .msg.me .bubble:not(.media):not(.plain){ border-top-right-radius:4px; }
html[data-bubble="tail"] .msg:not(.me) .bubble:not(.media):not(.plain)::before{
  content:''; position:absolute; left:-7px; top:0; width:0; height:0;
  border-style:solid; border-width:0 8px 9px 0; border-color:transparent var(--bubble-other) transparent transparent;
}
html[data-bubble="tail"] .msg.me .bubble:not(.media):not(.plain)::before{
  content:''; position:absolute; right:-7px; top:0; width:0; height:0;
  border-style:solid; border-width:0 0 9px 8px; border-color:transparent transparent var(--bubble-me) transparent;
}
html[data-bubble="sharp"] .bubble{ border-radius:5px; box-shadow:none; border:1px solid var(--line); }
html[data-bubble="sharp"] .msg.me .bubble{ border-color:transparent; }
html[data-bubble="cloud"] .msg:not(.me) .bubble{ border-radius:20px 20px 20px 5px; }
html[data-bubble="cloud"] .msg.me .bubble{ border-radius:20px 20px 5px 20px; }
html[data-bubble="line"] .bubble{ border-radius:0 12px 12px 0; background:transparent !important; box-shadow:none; border-left:3px solid var(--bubble-other); padding-left:11px; }
html[data-bubble="line"] .msg.me .bubble{ border-radius:12px 0 0 12px; border-left:0; border-right:3px solid var(--bubble-me); padding-right:11px; }
html[data-bubble="line"] .msg.me .bubble, html[data-bubble="line"] .msg.me .bubble *{ color:var(--txt) !important; }
html[data-bubble="line"] .msg.me .bubble a{ color:var(--bubble-me-link) !important; }
html[data-bubble="square"] .bubble{ border-radius:2px; box-shadow:none; }
html[data-bubble="glass"] .bubble{ border-radius:16px; backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.16); }
html[data-bubble="glass"] .msg:not(.me) .bubble{ background:rgba(var(--panel-rgb),.62) !important; }
html[data-bubble="glass"] .msg.me .bubble{ background:linear-gradient(135deg,rgba(var(--accent-rgb),.82),rgba(var(--accent2-rgb),.72)) !important; }

/* Markdown 表格 */
.md .md-table-wrap{ display:block; max-width:100%; overflow-x:auto; margin:.55em 0; -webkit-overflow-scrolling:touch; border-radius:8px; }
.md table{ border-collapse:collapse; width:max-content; min-width:100%; font-size:.95em; line-height:1.45; }
.md table th,
.md table td{ border:1px solid rgba(128,128,128,.35); padding:6px 10px; text-align:left; vertical-align:top; word-break:break-word; }
.md table th{ background:rgba(128,128,128,.16); font-weight:600; white-space:nowrap; }
.md table tbody tr:nth-child(even){ background:rgba(128,128,128,.06); }
.msg .bubble .md-table-wrap{ max-width:100%; }