/* Mobile composer: keep controls inside the visible viewport and above the fixed music player */
.chat-shell{height:min(78vh,820px);min-height:520px}
.chat-main,.chat-dialog,.chat-conv{min-height:0}
.chat-conv{height:100%;max-height:100%}
.chat-msgs{overscroll-behavior:contain;scrollbar-gutter:stable}
.chat-msg{max-width:min(78%,560px);position:relative}
.chat-msg-tools{display:flex;gap:5px;justify-content:flex-end;opacity:.65;margin-top:5px}
.chat-msg-tools button{font-size:11px;color:inherit;opacity:.8;padding:3px 5px;border-radius:6px;background:rgba(0,0,0,.12)}
.chat-file{display:block;color:#fff;padding:10px;border-radius:10px;background:rgba(0,0,0,.2);overflow-wrap:anywhere}
.chat-reply{font-size:11px;opacity:.7;margin-bottom:5px;border-left:2px solid currentColor;padding-left:7px}
.chat-reply-preview{padding:7px 12px;color:var(--muted);font-size:12px}
.chat-attachment-preview{display:flex;align-items:center;gap:9px;padding:8px 12px;max-width:100%;font-size:12px;color:var(--text)}
.chat-attachment-preview img{max-height:70px;max-width:90px;object-fit:cover;border-radius:8px}
.chat-attachment-preview span{overflow-wrap:anywhere}.chat-attachment-preview button{margin-left:auto;font-size:20px;color:var(--muted)}
.chat-form{position:relative;z-index:5;padding-bottom:max(10px,env(safe-area-inset-bottom));flex:0 0 auto;pointer-events:auto}
.chat-form textarea.input{position:relative;z-index:6;min-width:0;resize:none;max-height:120px;line-height:1.4;padding:11px;touch-action:manipulation;pointer-events:auto;user-select:text;-webkit-user-select:text}
.chat-form button{position:relative;z-index:7;pointer-events:auto;touch-action:manipulation}
.chat-file-input{position:absolute!important;width:1px;height:1px;opacity:0;overflow:hidden;pointer-events:none}
.hero-bg-preview{margin-top:10px;border-radius:14px;overflow:hidden;max-height:180px;background:#111}
.hero-bg-preview img,.hero-bg-preview video,.hero-preview-gradient{display:block;width:100%;height:180px;object-fit:cover}.profile-cover-card .hero-bg{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;z-index:0;pointer-events:none}.hero-avatar img,.hero-avatar video{width:100%;height:100%;object-fit:cover;display:block}.avatar-preview video{width:100%;height:100%;object-fit:cover;display:block}
.profile-cover-card{min-height:190px;padding:30px 38px;border-radius:24px;background-size:cover;background-position:center}
.profile-cover-card .hero-bg{background-size:cover!important;background-position:center!important;background-repeat:no-repeat!important}
.profile-cover-card .hero-overlay{background:linear-gradient(90deg,rgba(8,8,14,.58),rgba(8,8,14,.12))}
.profile-cover-card .hero-avatar{width:104px;height:104px;flex:0 0 104px;border-radius:28px;border:2px solid rgba(255,255,255,.64);box-shadow:0 10px 34px rgba(0,0,0,.45)}
.profile-cover-card .hero-text h1{font-size:clamp(24px,3vw,34px);text-shadow:0 2px 18px rgba(0,0,0,.65)}
.profile-cover-card .hero-text p{color:rgba(255,255,255,.86);text-shadow:0 1px 12px #000}
#app>.panel,#app>.hero{position:sticky;top:76px;z-index:2;transform:translateZ(0);box-shadow:0 14px 34px rgba(0,0,0,.28)}
#app>.hero{z-index:3}#app>.panel:nth-of-type(2){z-index:4}#app>.panel:nth-of-type(3){z-index:5}#app>.panel:nth-of-type(4){z-index:6}#app>.panel:nth-of-type(5){z-index:7}#app>.panel:nth-of-type(6){z-index:8}#app>.panel:nth-of-type(7){z-index:9}#app>.panel:nth-of-type(8){z-index:10}#app>.panel:nth-of-type(9){z-index:11}
@media(max-width:720px){
 .chat-shell{position:relative;height:calc(100dvh - 180px - env(safe-area-inset-top) - env(safe-area-inset-bottom));min-height:320px;max-height:calc(100dvh - 165px);margin-bottom:110px;border-radius:16px;overflow:hidden;isolation:isolate}
 .chat-shell:not(.mobile-open) .chat-side{position:relative;z-index:20;pointer-events:auto}
 .chat-shell:not(.mobile-open) .chat-side-head,.chat-shell:not(.mobile-open) .chat-me{position:relative;z-index:21;pointer-events:auto}
 #chatProfileBtn{position:relative;z-index:22;pointer-events:auto;touch-action:manipulation;min-width:42px;min-height:42px}
 .chat-shell:not(.mobile-open) .chat-dialog{display:none!important}
 .chat-shell.mobile-open .chat-dialog{display:flex!important}
 .chat-shell.mobile-open .chat-side{display:none!important}
 .chat-main{height:100%;min-height:0}.chat-dialog{height:100%;min-height:0;overflow:hidden}.chat-conv{height:100%;min-height:0;max-height:100%;overflow:hidden}
 .chat-msgs{flex:1 1 0;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
 .chat-form{gap:6px;padding:8px;padding-bottom:max(8px,env(safe-area-inset-bottom));background:rgba(16,16,22,.98);border-top:1px solid var(--border);margin-bottom:0;position:relative;z-index:101}
 .chat-form .chat-send{padding:0 11px;min-height:42px;white-space:nowrap;font-size:12px}.chat-attach{flex:0 0 42px;width:42px;height:42px;min-height:42px;cursor:pointer}
 .chat-msg{max-width:88%}.chat-msg-tools{opacity:1;flex-wrap:wrap}
 #app>.panel,#app>.hero{top:62px;margin-bottom:16px;border-radius:18px}
 .profile-cover-card{min-height:150px;padding:20px;gap:16px}.profile-cover-card .hero-avatar{width:76px;height:76px;flex-basis:76px;border-radius:22px}.profile-cover-card .hero-text h1{font-size:22px}
}
@media(max-width:380px){.chat-form .chat-send{font-size:0;padding:0;width:42px}.chat-form .chat-send:after{content:'➤';font-size:16px}.profile-cover-card{padding:16px}.profile-cover-card .hero-avatar{width:64px;height:64px;flex-basis:64px}}