:root{
  --bg:#ededeb;--bar:rgba(248,248,247,.96);--line:rgba(0,0,0,.055);--text:#151515;
  --muted:#8e8e8e;--bubble:#fff;--mine:#95ec69;--send:#07c160;--dragon:#33483f;
  --dragonText:#f4e0a5;--self:#cfc5ad;--danger:#c84d4d;--shadow:0 .5px 1.2px rgba(0,0,0,.045);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;background:#d7d7d7;color:var(--text)}
body{overflow:hidden}
button,input,textarea{font:inherit}
button{border:0;background:none;color:inherit;cursor:pointer}
button:active{opacity:.68}
.app{width:min(880px,100%);height:100dvh;margin:0 auto;background:var(--bg);display:grid;grid-template-rows:calc(55px + env(safe-area-inset-top)) 1fr auto;box-shadow:0 0 30px rgba(0,0,0,.10);position:relative}
.topbar{display:grid;grid-template-columns:95px 1fr 95px;align-items:end;padding-top:env(safe-area-inset-top);min-height:55px;background:var(--bar);border-bottom:1px solid var(--line);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);z-index:8}
.left-status{height:55px;display:flex;align-items:center;padding-left:14px;min-width:0}.devtag{font-size:10px;color:#777;white-space:nowrap}
.identity{height:55px;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0}.title{font-size:17px;font-weight:650;line-height:22px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.presence{font-size:10px;line-height:14px;margin-top:1px}.presence.online{color:#369255}.presence.offline{color:var(--danger)}
.nav-btn{height:55px;display:flex;align-items:center}.more{justify-content:flex-end;padding-right:17px;font-size:18px;font-weight:700;letter-spacing:2px}
.modebar{position:absolute;left:50%;transform:translateX(-50%);top:calc(58px + env(safe-area-inset-top));z-index:9;background:rgba(255,255,255,.95);padding:3px;border-radius:10px;box-shadow:0 3px 16px rgba(0,0,0,.09);display:flex;gap:3px}.mode{padding:5px 10px;border-radius:7px;font-size:12px;color:#777}.mode.active{background:#222;color:#fff}.mode.locked{opacity:.42}
.chat{overflow-y:auto;-webkit-overflow-scrolling:touch;padding:39px 13px 108px;overscroll-behavior:contain;scroll-behavior:smooth}.marker{text-align:center;color:#aaa;font-size:12px;margin:16px 0}.msg{display:flex;align-items:flex-start;gap:10px;margin:14px 0}.msg.me{justify-content:flex-end}.avatar{width:40px;height:40px;flex:0 0 40px;border-radius:6px;display:grid;place-items:center;font-size:15px;user-select:none;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.06)}.avatar.dragon{background:linear-gradient(145deg,#3b5047,var(--dragon));color:var(--dragonText)}.avatar.self{background:linear-gradient(145deg,#d9d1bf,var(--self));color:#4b463d}.bubble{position:relative;max-width:min(70%,585px);padding:9px 12px 10px;border-radius:6px;font-size:16px;line-height:1.58;white-space:pre-wrap;word-break:break-word;box-shadow:var(--shadow)}.other .bubble{background:var(--bubble)}.me .bubble{background:var(--mine)}.other .bubble:before{content:"";position:absolute;left:-7px;top:13px;border-top:6px solid transparent;border-bottom:6px solid transparent;border-right:8px solid var(--bubble)}.me .bubble:after{content:"";position:absolute;right:-7px;top:13px;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:8px solid var(--mine)}.typing .bubble{color:#8b8b8b;font-size:13px;letter-spacing:.2px}.failed .bubble{outline:1px solid rgba(200,77,77,.28)}
.empty{text-align:center;color:#999;font-size:13px;margin-top:25vh;line-height:1.8}.empty-mark{width:44px;height:44px;border-radius:8px;margin:0 auto 12px;display:grid;place-items:center;background:var(--dragon);color:var(--dragonText);font-size:18px}.empty .sub{font-size:12px;color:#aaa}.hidden{display:none!important}
.composer{display:grid;grid-template-columns:36px 36px 1fr auto;gap:8px;align-items:end;padding:8px 10px calc(8px + env(safe-area-inset-bottom));background:#f7f7f7;border-top:1px solid var(--line);z-index:10}.round-btn{width:35px;height:35px;border:1.6px solid #252525;border-radius:50%;display:grid;place-items:center;font-size:20px;margin-bottom:1px}.composer textarea{resize:none;min-height:38px;max-height:126px;border:0;border-radius:6px;background:#fff;outline:none;padding:8px 10px;font-size:16px;line-height:22px}.send-btn{height:38px;padding:0 15px;border-radius:5px;background:var(--send);color:#fff}.send-btn:disabled{opacity:.5}
.emoji-panel{position:fixed;bottom:65px;left:50%;transform:translateX(-50%);width:min(440px,calc(100% - 24px));padding:10px;background:#fff;border-radius:11px;box-shadow:0 10px 34px rgba(0,0,0,.19);display:flex;flex-wrap:wrap;gap:5px;z-index:30}.emoji-panel button{background:#f5f5f5;border-radius:7px;font-size:22px;padding:7px 9px}.bubble-menu{position:fixed;z-index:40;display:flex;overflow:hidden;border-radius:6px;background:#292929;box-shadow:0 6px 24px rgba(0,0,0,.28)}.bubble-menu button{color:#fff;padding:10px 17px;font-size:14px}.toast{position:fixed;z-index:60;left:50%;top:76px;transform:translateX(-50%);max-width:min(82vw,480px);background:rgba(0,0,0,.75);color:#fff;padding:8px 13px;border-radius:7px;font-size:13px;text-align:center}.jump-bottom{position:absolute;right:14px;bottom:82px;z-index:15;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.93);box-shadow:0 3px 14px rgba(0,0,0,.15);font-size:18px;color:#555}
.settings-dialog{width:min(470px,calc(100% - 24px));border:0;border-radius:12px;padding:0;background:#fff;color:#111;box-shadow:0 18px 60px rgba(0,0,0,.28)}.settings-dialog::backdrop{background:rgba(0,0,0,.42);backdrop-filter:blur(3px)}.settings-card{padding:20px;display:grid;gap:15px}.settings-head{display:flex;align-items:center;justify-content:center;position:relative;font-size:18px}.close-dialog{position:absolute;right:-3px;top:-5px;font-size:26px;color:#777}.settings-card label{display:grid;gap:6px;color:#666;font-size:13px}.settings-card input{width:100%;border:1px solid #ddd;border-radius:6px;padding:10px;background:#fff;outline:none;color:#111}.settings-card small{color:#999;line-height:1.5}.settings-row{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:10px 0;border-top:1px solid #eee;border-bottom:1px solid #eee}.settings-row>div{display:grid;gap:4px}.settings-row.compact{border-top:0;padding-top:0}.secondary,.primary{padding:9px 17px;border-radius:6px}.secondary{background:#eee}.primary{background:var(--send);color:#fff}.settings-note{font-size:12px;color:#999;line-height:1.6}.settings-actions{display:flex;justify-content:flex-end;gap:9px}code{font-size:12px;color:#666}
@media(max-width:600px){html,body{background:var(--bg)}.app{box-shadow:none}.bubble{max-width:76%}.topbar{grid-template-columns:88px 1fr 88px}}

.top-actions{height:55px;display:flex;align-items:center;justify-content:flex-end;gap:0}
.quotes-btn{font-size:20px;padding:0 5px}
.avatar.has-image{font-size:0;background-size:cover;background-position:center}
.settings-section{display:grid;gap:10px}
.section-title{font-size:13px;color:#666}
.profile-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.avatar-editor{border:1px solid #e5e5e5;border-radius:10px;padding:12px;display:grid;gap:8px;justify-items:center;background:#fafafa;font-size:12px}
.avatar-preview{width:66px;height:66px;border-radius:10px;background:#ddd center/cover no-repeat;display:grid;place-items:center;color:#666;box-shadow:inset 0 0 0 .5px rgba(0,0,0,.06)}
.dragon-preview{background-color:#33483f;color:#f4e0a5}.self-preview{background-color:#cfc5ad;color:#4b463d}
.pick-avatar{font-size:12px;padding:7px 10px;background:#eee;border-radius:6px;cursor:pointer}.avatar-file{display:none}
.settings-card textarea{width:100%;resize:vertical;border:1px solid #ddd;border-radius:6px;padding:10px;background:#fff;outline:none;color:#111;line-height:1.5}
.quote-preview{background:#f5f5f5;border-radius:8px;padding:10px;font-size:14px;line-height:1.55;max-height:130px;overflow:auto;white-space:pre-wrap}
.quotes-dialog{width:min(620px,calc(100% - 24px))}
.quote-toolbar{display:grid;grid-template-columns:1fr auto;gap:8px}
.quote-toolbar input{border:1px solid #ddd;border-radius:6px;padding:10px;outline:none}
.quote-list{display:grid;gap:10px;min-height:130px;max-height:56dvh;overflow:auto}
.quote-item{border:1px solid #e5e5e5;border-radius:10px;background:#fff;padding:12px;display:grid;gap:8px}
.quote-meta{font-size:11px;color:#999;display:flex;justify-content:space-between;gap:8px}
.quote-text{white-space:pre-wrap;line-height:1.55;font-size:14px}.quote-note{font-size:12px;color:#666}
.tags{display:flex;gap:5px;flex-wrap:wrap}.tag{font-size:11px;background:#f1f1f1;border-radius:999px;padding:3px 7px;color:#666}
.quote-actions{display:flex;justify-content:flex-end;gap:6px}.quote-actions button{font-size:12px;padding:6px 8px;border-radius:6px;background:#f3f3f3}
.quote-empty{text-align:center;color:#aaa;padding:30px 0;font-size:13px}
.msg.flash .bubble{animation:quoteFlash 1.15s ease}@keyframes quoteFlash{0%,100%{box-shadow:var(--shadow)}50%{box-shadow:0 0 0 3px rgba(7,193,96,.35)}}
@media(max-width:600px){.profile-row{grid-template-columns:1fr 1fr}}

.composer-shell{background:#f7f7f7;z-index:10}
.hidden-file{display:none}
.image-btn{font-size:24px;line-height:1}
.image-preview-bar{display:grid;grid-template-columns:58px 1fr 30px;align-items:center;gap:10px;padding:9px 12px 7px;border-top:1px solid var(--line);background:#f7f7f7}
.image-preview-bar img{width:58px;height:58px;object-fit:cover;border-radius:7px;background:#e7e7e7}
.image-preview-copy{display:grid;gap:4px;min-width:0}.image-preview-copy strong{font-size:13px}.image-preview-copy span{font-size:11px;color:#999;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.image-preview-bar>button{width:28px;height:28px;border-radius:50%;background:#e8e8e8;color:#666;font-size:20px}
.bubble-image{margin:-3px -5px 7px;overflow:hidden;border-radius:5px;background:rgba(0,0,0,.05);min-width:150px}
.bubble-image img{display:block;max-width:260px;width:100%;max-height:300px;object-fit:cover}
.history-image-placeholder{padding:16px 12px;text-align:center;color:#777;font-size:12px;background:rgba(255,255,255,.35)}
.bubble-text:empty{display:none}

/* B7 mobile bottom-gap hardening */
#chat{padding-bottom:14px!important;scroll-padding-bottom:18px}
.composer-shell{position:relative;flex:0 0 auto}
.composer{padding-bottom:max(8px,env(safe-area-inset-bottom))}
@supports(height:100dvh){
  .app-shell{height:100dvh;min-height:100dvh}
}
@media(max-width:700px){
  #chat{padding-bottom:10px!important}
  .composer{padding-top:8px}
}