.messages-page .personal{position:relative;isolation:isolate;overflow:hidden;border:0;border-radius:8px;padding:22px 16px;background:#eaf2fc}
.personal-background{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.18;z-index:-1}
.messages-page .personal>.avatar{border:3px solid white;width:64px;height:64px;border-radius:50%;box-shadow:0 0 0 1px #c9b9f2}
.messages-page .personal .profile-copy{min-width:0}.messages-page .personal h2{font-size:20px;overflow-wrap:anywhere}.messages-page .personal .muted{font-size:13px}
.profile-edit{display:flex;align-items:center;gap:2px;white-space:nowrap;align-self:flex-start;background:#ffffffc9;padding:6px 8px;border-radius:6px;font-size:12px}.profile-edit svg{width:14px;height:14px}
.messages-page .section-actions h2{position:relative;padding-left:12px;font-size:19px}.messages-page .section-actions h2:before{content:'';position:absolute;left:0;top:5px;bottom:5px;width:4px;border-radius:3px;background:var(--accent)}
#conversation-count{font-size:.85em;font-weight:500}
.messages-page #conversations{background:transparent;display:grid;gap:10px}
.conversation-row{position:relative;background:#fff;border-radius:8px;box-shadow:0 3px 12px #28335604;min-width:0}
.conversation-link{display:flex;align-items:center;gap:12px;padding:16px 14px;min-height:96px}
.conversation-avatar{position:relative;display:block;width:56px;height:56px;flex:none}
.conversation-avatar>.avatar{width:100%;height:100%;border-radius:12px;object-fit:cover}
.conversation-kind{position:absolute;right:-3px;bottom:-3px;display:grid;place-items:center;width:21px;height:21px;border:2px solid white;border-radius:50%;background:#eee8ff;color:#6940c2}
.conversation-kind.private{background:#e1f3f0;color:#226f65}
.conversation-kind svg{width:12px;height:12px;stroke-width:2.2}
.conversation-placeholder.group{background:#ece9ff;color:#8566dd}.conversation-placeholder.private{background:#e8f5f3;color:#338577}
.conversation-copy{flex:1;min-width:0}.conversation-title{display:flex;align-items:center;flex-wrap:wrap;gap:6px}.conversation-title h3{font-size:16px;line-height:1.4;overflow-wrap:anywhere}
.conversation-role{font-size:11px;padding:1px 5px;border-radius:4px;color:#3583ad;background:#eaf6ff;white-space:nowrap}.conversation-role.official{background:#fff0ef;color:#b64c4c}.conversation-role.support{background:#eee9ff;color:#7853c2}.conversation-role.player{background:#edf5f0;color:#377853}
.conversation-copy p{margin:7px 0 0;color:#778092;font-size:13px;line-height:1.6;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}
.conversation-state{display:flex;flex-direction:column;align-items:flex-end;align-self:flex-start;gap:10px;min-width:38px;padding-top:2px}.conversation-state time{font-size:11px;color:#81899a;white-space:nowrap}.conversation-state .unread{background:#f06472;min-width:22px;font-size:11px}
.conversation-chevron svg{width:17px;height:17px;color:#768096}.conversation-menu{position:absolute;right:5px;bottom:0;width:28px;height:22px;padding:1px 5px;background:transparent;color:#8c93a0;display:flex;align-items:center;justify-content:center}.conversation-menu svg{width:17px;height:17px}
.conversation-link:hover{background:#fafaff;border-radius:8px}
.conversation-row.is-pinned{background:#f4f1fc}
.conversation-row.is-pinned .conversation-link{border-radius:8px;background:transparent}
.conversation-row.is-pinned:focus-within,.conversation-row.is-pinned .conversation-link:hover,.conversation-row.is-pinned .conversation-link:focus-visible{background:#ebe5fa}
.conversation-row.is-pinned .conversation-link:active{background:#e2d8f7}
.conversation-pin{display:inline-flex;align-items:center;color:#7650b9}
.conversation-pin svg{width:14px;height:14px}
.conversation-action-menu{position:absolute;right:8px;bottom:28px;z-index:7;width:156px;padding:5px;background:white;border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 24px #20243724}
.conversation-action-menu button{display:flex;align-items:center;gap:10px;width:100%;min-height:42px;padding:9px 12px;background:transparent;text-align:left;border-radius:4px;font-size:14px;color:var(--ink)}
.conversation-action-menu button:hover,.conversation-action-menu button:focus-visible{background:#f2eefb;filter:none}
.conversation-action-menu button svg{width:17px;height:17px;flex:none}
.conversation-action-menu .menu-danger{color:#bb304a;border-top:1px solid var(--line);border-radius:0}
.conversation-menu[aria-expanded=true]{color:var(--accent);background:#eee8fc}
.messages-page .room-card{box-shadow:0 3px 14px #23355305}.messages-page .room-enter{border-radius:24px}
/* Fixed compact tracks prevent long names from stretching the whole carousel. */
@media(max-width:899px){
 .messages-page .rooms{gap:10px;align-items:start;padding-bottom:8px}
 .messages-page .room-card{flex:0 0 104px;width:104px;height:180px;min-width:0;display:grid;grid-template-rows:68px 28px 14px 30px;gap:6px;padding:10px 8px;border-radius:8px}
 .messages-page .room-card>.avatar,.messages-page .room-card>.room-image{width:68px;height:68px;aspect-ratio:1;object-fit:cover;border-radius:10px;justify-self:center}
 .messages-page .room-card>.avatar svg{width:30px;height:30px}
 .messages-page .room-card h3{font-size:12px;line-height:14px;margin:0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow-wrap:anywhere}
 .messages-page .room-card p{font-size:11px;line-height:14px;height:14px;min-height:0;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .messages-page .room-card .room-enter{margin:0;padding:5px 8px;font-size:12px;line-height:20px;height:30px;min-height:0;text-align:center;border-radius:18px}
 .messages-page .message-workspace{margin-top:12px}
 .messages-page .message-workspace .section-actions{min-height:28px;gap:10px;margin:0 0 8px;padding:0}
 .messages-page .message-workspace .section-actions h2{margin:0;line-height:28px}
 .messages-page .recent-conversations{margin-top:12px}
 .messages-page .rooms{padding-bottom:0}
}
@media(max-width:600px){.messages-page .personal{padding:18px 12px;gap:12px}.messages-page .personal>.avatar{width:54px;height:54px}.messages-page .personal h2{font-size:17px}.messages-page .profile-edit{font-size:11px;padding:5px}.conversation-link{gap:10px;padding:14px 10px;min-height:90px}.conversation-link>.avatar{width:46px;height:46px;border-radius:10px}.conversation-title h3{font-size:15px}.conversation-copy p{font-size:12px}.conversation-chevron svg{width:14px}.messages-page .section-actions h2{font-size:18px}}
@media(max-width:360px){.profile-edit{position:absolute;right:8px;top:8px}.messages-page .personal{padding-top:38px}.conversation-link{gap:7px}.conversation-link>.avatar{width:40px;height:40px}.conversation-title h3{font-size:14px}}
@media(min-width:900px){.messages-page>.personal{display:none}.messages-page .section-actions h2{font-size:15px}.conversation-link{padding:14px 12px;min-height:90px;gap:10px}.conversation-link>.avatar{width:44px;height:44px}.conversation-title h3{font-size:14px}.conversation-copy p{font-size:12px}.conversation-role{font-size:10px}.conversation-chevron{display:none}}
.official-room-badge{display:inline-flex;align-items:center;gap:3px;flex-shrink:0;background:#fff3d6;color:#865600;padding:2px 5px;border-radius:4px;font:11px/16px system-ui,sans-serif;white-space:nowrap}.official-room-badge svg,.official-room-mark svg{width:14px;height:14px;flex:none;vertical-align:middle}.official-room-mark{color:#865600;margin-right:3px}
.profile-presence{position:relative;display:inline-flex;flex:none;width:64px;height:64px}.messages-page .profile-presence>.avatar{width:100%;height:100%;border:3px solid #fff;border-radius:50%;box-shadow:0 0 0 1px #c9b9f2}.connection-dot{position:absolute;right:0;bottom:1px;width:14px;height:14px;border:3px solid white;border-radius:50%;background:#8c929c;box-sizing:border-box}.connection-dot[data-state=connected]{background:#16bd83}.connection-dot[data-state=connecting]{background:#e9ad28}@media(max-width:600px){.profile-presence{width:54px;height:54px}}
@media(max-width:600px){.conversation-avatar{width:46px;height:46px}.conversation-avatar>.avatar{border-radius:10px}}
@media(max-width:360px){.conversation-avatar{width:40px;height:40px}}
@media(min-width:900px){.conversation-avatar{width:44px;height:44px}}