/* Functional components reuse Put Me On's existing blush/plum and coral palette. */
.social-avatar{display:inline-grid;place-items:center;flex:none;width:42px;height:42px;border-radius:50%;background:#f9f1f2;color:#242328;font-weight:800;border:2px solid #fff}
.post-head .social-avatar,.feed-reply .social-avatar{width:38px;height:38px}.social-avatar+span{min-width:0}
.media-selected{margin:10px 0 0 52px;padding:8px 12px;border-radius:12px;background:#fdebed;color:#242328;font-size:12px;display:flex;justify-content:space-between;align-items:center;gap:8px}.media-selected button{border:0;background:none;cursor:pointer;color:#242328;font-size:20px}
.social-messages{min-height:74vh;padding:23px!important}.social-messages h1{font-size:27px;margin-bottom:18px}
.social-msg-layout{display:grid;grid-template-columns:minmax(190px,245px) minmax(0,1fr);min-height:510px;border:1px solid #f8e7e9;border-radius:19px;overflow:hidden;background:white}
.social-msg-list{border-right:1px solid #f8e7e9;background:#fdebed;padding:12px}.social-msg-list .directory-search{width:100%;margin:0 0 12px}.social-msg-list .directory-search input{min-width:0;width:100%}
.social-peer{display:flex;align-items:center;gap:9px;width:100%;padding:9px 8px;margin:3px 0;text-align:left;background:transparent;border:0;border-radius:12px;color:#242328;cursor:pointer;font-weight:700}.social-peer.active{background:#f9f1f2}.social-peer:hover{background:#fdebed}.social-peer[hidden]{display:none}
.social-msg-conversation{display:flex;flex-direction:column;min-width:0;min-height:420px}.social-msg-peer{display:flex;gap:9px;align-items:center;padding:12px 16px;border-bottom:1px solid #f8e7e9;min-height:66px}.social-msg-log{flex:1;padding:15px;display:flex;flex-direction:column;gap:9px;overflow-y:auto;max-height:55vh;background:#fdebed}
.direct-bubble{max-width:82%;align-self:flex-start;background:#f9f1f2;border-radius:15px 15px 15px 4px;padding:10px 14px;color:#242328;overflow-wrap:anywhere;font-size:14px}.direct-bubble.mine{align-self:flex-end;background:#e5d3d6;color:white;border-radius:15px 15px 4px 15px}.direct-bubble small{display:block;font-size:10px;opacity:.7;margin-top:3px;text-align:right}
.social-msg-input{display:flex;gap:9px;padding:12px;border-top:1px solid #f8e7e9}.social-msg-input input{min-width:0;flex:1;border:1px solid #f8e7e9;border-radius:12px;padding:10px 12px}.social-msg-input button{padding:9px 17px}
.social-room .room-head-icon{display:grid;place-items:center;background:#f9f1f2;color:#e5d3d6;width:58px;height:58px;border-radius:18px}.social-room .room-head>div{display:flex;gap:12px;align-items:center}.social-room .room-head h1{font-size:clamp(20px,2.2vw,30px)}
.room-connected{color:#baacb8}.room-connected.online{color:#20b177}.room-indicator{font-size:12px;color:#242328}.room-real-person{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:90px}.social-room-person{height:70px;width:70px;border:3px solid #f6e0e4;border-radius:50%;display:grid;place-items:center;background:linear-gradient(130deg,#f8e7e9,#f6e0e4);font-weight:800;font-size:22px;color:#242328}.room-real-person b{font-size:12px}.room-real-person small{font-size:11px;color:#242328}.social-room-idle{padding:20px;font-size:13px;color:#242328}.room-error{color:#242328;font-size:12px;padding:10px 2px}.social-room-controls{flex-wrap:wrap}.social-room-controls>button{min-width:88px}.media-players{display:flex;gap:12px;flex-wrap:wrap}.room-media-video{max-width:100%;width:230px;max-height:220px;border-radius:13px;background:#242328}.room-stream-media{position:relative}
.social-room .room-chat-log{min-height:160px;max-height:320px;overflow-y:auto;overflow-wrap:anywhere}.social-room .room-chat-log p{margin:7px 0}.social-room .room-chat-input{display:flex}.social-room .room-chat-input input{min-width:0}
.room-admin-controls{padding:10px 0;border-top:1px solid #f8e7e9;max-height:285px;overflow-y:auto}.room-admin-controls h3{font-size:13px;margin:0 0 7px}.room-mod-user{display:flex;align-items:center;gap:5px;padding:6px 0;border-bottom:1px solid #fdebed;flex-wrap:wrap}.room-mod-user .social-avatar{height:30px;width:30px;font-size:12px}.room-mod-user>span:not(.social-avatar){display:grid;flex:1;min-width:75px}.room-mod-user b{font-size:11px}.room-mod-user small{font-size:10px;color:#927b89}.room-mod-user button{font-size:11px!important;padding:5px!important}.room-mod-user select{font-size:10px;max-width:95px;padding:5px 4px;border-radius:9px;border:1px solid #f8e7e9;background:white}
@media(max-width:800px){.social-msg-layout{grid-template-columns:minmax(95px,30%) minmax(0,1fr)}.social-msg-list{padding:7px}.social-peer{gap:4px;font-size:11px;padding:6px 3px}.social-peer .social-avatar{width:30px;height:30px;font-size:12px}.social-messages{padding:12px!important}.social-msg-input{padding:8px}.social-msg-peer{padding:8px}.room-mod-user select{max-width:78px}}
@media(max-width:430px){.social-msg-layout{grid-template-columns:105px minmax(0,1fr)}.social-msg-list .directory-search input{font-size:10px}.social-msg-input button{padding:8px}.social-msg-input input{font-size:12px}.social-msg-log{padding:8px}.direct-bubble{font-size:12px;padding:8px;max-width:95%}.social-room .room-head>div{gap:8px}.social-room .room-head-icon{width:40px;height:40px}.social-room .room-head h1{font-size:18px}.social-room-person{width:56px;height:56px}}
.social-real-creators{margin-top:20px}.social-real-creator{min-height:140px;background:#fdebed}.social-real-creator .creator-profile-body{display:flex;flex-direction:column;gap:12px;align-items:flex-start;padding:16px}.social-real-creator .creator-profile-actions{display:flex;flex-wrap:wrap;gap:8px}.social-real-creator .creator-profile-actions>button{font-size:12px}



/* Align connected participants with the original Codex on-stage avatars. */
.social-room .room-real-person{display:grid;justify-items:center;gap:3px;min-width:55px}
.social-room .social-room-person{height:55px;width:55px;border:2px solid #e5d3d6;padding:3px;box-shadow:inset 0 0 0 3px #fff;font-size:19px}
.social-room .room-real-person b{font-size:10px}.social-room .room-real-person small{font-size:10px}
.social-room .room-avatar-grid{justify-content:space-around}
.social-room .room-stage{min-height:365px}
.social-room .room-pinned[hidden]{display:none}
.social-room .room-pinned:not([hidden]){display:flex}