.social-page{padding:125px 5vw 65px;max-width:1400px;margin:auto}.social-page h1{font-size:clamp(32px,4vw,50px)}.social-intro,.social-muted{color:#aaa;line-height:1.6}.social-inbox{display:grid;grid-template-columns:300px minmax(0,1fr);gap:25px;margin-top:25px}.social-inbox>aside{border-right:1px solid #ffffff20;padding-right:20px}.social-conversation{display:flex;gap:12px;align-items:center;text-align:left;padding:15px 8px;width:100%;border-bottom:1px solid #ffffff18}.social-conversation.selected{background:#edc3670c}.social-conversation>span{min-width:0;flex:1}.social-conversation small{display:block;margin-top:6px;color:#999;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.social-avatar{width:40px;height:40px;min-width:40px;border-radius:50%;object-fit:cover;border:1px solid #edc36740}.social-avatar[hidden]{display:none}.social-count{font-size:11px;padding:3px 6px;background:#edc367;color:#111;border-radius:12px}.social-count[hidden]{display:none}.social-official{display:inline-block;font-size:8px;letter-spacing:1px;color:#edc367;border:1px solid #edc36750;border-radius:4px;padding:3px;margin-left:5px}.social-thread-heading{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.social-thread-heading h2{font-size:22px;flex:1}.social-thread-heading button,.social-actions button,.social-person>button{color:#edc367}.social-thread>.social-muted{font-size:11px}.social-messages{max-height:480px;overflow:auto;display:flex;flex-direction:column;gap:16px;padding:15px 0}.social-message{align-self:flex-start;max-width:85%;border:1px solid #ffffff20;background:#151616;border-radius:13px;padding:15px 18px}.social-message.mine{align-self:flex-end;background:#edc36712;border-color:#edc36730}.social-message p{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.6;margin:0 0 8px}.social-message small{color:#999;font-size:10px}.social-message details{margin-top:9px;font-size:10px;color:#aaa}.social-message details button{color:#edc367;padding:8px}.social-message summary{cursor:pointer}#social-compose{padding-top:18px;border-top:1px solid #ffffff20}#social-compose textarea{width:100%;font:inherit;resize:vertical;color:#eee;background:#171818;border:1px solid #ffffff30;border-radius:9px;padding:15px;margin-bottom:12px}.social-person{display:flex;gap:15px;align-items:center;padding:20px 0;border-bottom:1px solid #ffffff18;flex-wrap:wrap}.social-person>div:first-of-type{flex:1}.social-person p{color:#aaa;font-size:12px}.social-actions{display:flex;gap:12px;flex-wrap:wrap}.social-settings{max-width:650px;padding-top:20px}.social-check{display:flex;gap:12px;align-items:center;line-height:1.5}.social-check input{width:auto;accent-color:#edc367}.social-settings h2{margin-top:35px}#social-search{max-width:500px;margin-top:30px}#social-search label{display:block;margin-bottom:12px}#social-search input{font:inherit;width:100%;color:#eee;background:#171818;padding:14px;border:1px solid #ffffff30;border-radius:9px;margin-bottom:15px}.social-empty{padding:70px 20px;color:#aaa}.social-report-row{border:1px solid #ffffff20;padding:15px;border-radius:10px;margin:15px 0}.social-report-row p{white-space:pre-wrap;overflow-wrap:anywhere}.social-report-row button{color:#edc367;padding:8px}.social-page select{background:#222;color:#eee;border:1px solid #444;padding:8px;max-width:100%}#social-status,#social-send-status{color:#d9c8a3;line-height:1.5}
@media(max-width:760px){.social-page{padding:105px 20px 40px}.social-inbox{grid-template-columns:1fr}.social-inbox>aside{border-right:0;border-bottom:1px solid #ffffff20;padding:0 0 20px}.social-messages{max-height:55dvh}.social-message{max-width:92%}.social-thread-heading h2{font-size:18px}.social-person{gap:10px}.social-actions{width:100%}}

/* Inbox width fix */
.social-page{width:100%;box-sizing:border-box}
#social-content,.social-inbox,.social-inbox>*,.social-thread{min-width:0;max-width:100%;box-sizing:border-box}
.social-inbox{grid-template-columns:minmax(0,300px) minmax(0,1fr)}
.social-conversation{min-width:0;max-width:100%;box-sizing:border-box}
.social-conversation>span{display:block;width:0;min-width:0;flex:1}
.social-conversation strong{display:block;overflow-wrap:anywhere}
.social-conversation small{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.social-empty{box-sizing:border-box;overflow-wrap:anywhere}
.social-thread-heading h2{min-width:0;overflow-wrap:anywhere}
#social-compose textarea{box-sizing:border-box;max-width:100%}
@media(max-width:760px){
.social-inbox{grid-template-columns:minmax(0,1fr)}
.social-page{padding-left:16px;padding-right:16px}
.social-empty{padding:30px 0}
}