.webapp,
.webapp dialog,
.webapp .people-preview > div,
.webapp .rooms-list {
    scrollbar-width: thin;
    scrollbar-color: #b9aec8 transparent;
}

.webapp::-webkit-scrollbar,
.webapp dialog::-webkit-scrollbar,
.webapp .people-preview > div::-webkit-scrollbar,
.webapp .rooms-list::-webkit-scrollbar { width: 10px; height: 10px; }

.webapp::-webkit-scrollbar-track,
.webapp dialog::-webkit-scrollbar-track,
.webapp .people-preview > div::-webkit-scrollbar-track,
.webapp .rooms-list::-webkit-scrollbar-track { margin: 8px; background: transparent; }

.webapp::-webkit-scrollbar-thumb,
.webapp dialog::-webkit-scrollbar-thumb,
.webapp .people-preview > div::-webkit-scrollbar-thumb,
.webapp .rooms-list::-webkit-scrollbar-thumb {
    min-height: 38px;
    border: 3px solid transparent;
    border-radius: 999px;
    background: #b9aec8;
    background-clip: padding-box;
}

.webapp::-webkit-scrollbar-thumb:hover,
.webapp dialog::-webkit-scrollbar-thumb:hover,
.webapp .people-preview > div::-webkit-scrollbar-thumb:hover,
.webapp .rooms-list::-webkit-scrollbar-thumb:hover { background: #8069c8; background-clip: padding-box; }

.people-preview { overflow: hidden; padding: 18px; }
.dialog-organizer{display:flex;align-items:center;gap:12px;margin:20px 0 0;padding:12px;border:1px solid #e1dbea;border-radius:16px;background:linear-gradient(135deg,#faf8fe,#f5faf8)}.dialog-organizer-logo{display:grid;place-items:center;width:52px;height:52px;overflow:hidden;flex:0 0 52px;border:1px solid #ddd3ed;border-radius:14px;background:#ece5f8;color:#684baa;font-size:13px;font-weight:820}.dialog-organizer-logo img{width:100%;height:100%;object-fit:cover}.dialog-organizer>div{display:grid;gap:2px;min-width:0}.dialog-organizer small{color:#898190;font-size:8px;font-weight:760;letter-spacing:.08em;text-transform:uppercase}.dialog-organizer b{overflow:hidden;color:#312b37;font-size:12px;text-overflow:ellipsis;white-space:nowrap}.dialog-organizer div span{color:#7e7583;font-size:9px}.room-invite-form{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:10px;margin:0 0 18px;padding:15px;border:1px solid #e3ddec;border-radius:15px;background:#faf8fd}.room-invite-form label{display:grid;gap:6px;color:#554e5a;font-size:9px;font-weight:750}.room-invite-form textarea{min-height:58px;padding:10px 11px;border:1px solid #ded8e4;border-radius:10px;outline:0;background:#fff;color:#3f3944;font:500 10px/1.5 Arial,sans-serif;resize:vertical}.room-invite-form .ghost-button{margin:0;justify-content:center}
.dash-card { min-width: 0; }
.rooms-list { max-height: 540px; overflow: auto; padding: 3px 7px 6px 2px; scrollbar-gutter: stable; }
.room-row, .room-row > div { min-width: 0; }
.room-row strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rooms-list .room-row{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:16px;padding:20px;overflow:hidden}
.rooms-list .room-row>span:first-child{width:42px;height:42px;grid-column:1;grid-row:1}
.rooms-list .room-row>div:not(.room-avatars){grid-column:2;grid-row:1}
.rooms-list .room-row>em{grid-column:3;grid-row:1;white-space:nowrap}
.rooms-list .room-row>.room-avatars{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fill,minmax(94px,1fr));align-content:start;gap:20px 16px;width:100%;height:auto;max-height:268px;min-width:0;margin:0;padding:18px 12px 14px;border-top:1px solid #eeeaf3;border-radius:0;background:transparent;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:#b9aec8 transparent}
.room-avatars .room-avatar-tile{display:flex;flex-direction:column;align-items:center;gap:10px;min-width:0;margin:0;padding:4px}
.room-avatars .room-avatar-tile>img,.room-avatars .room-avatar-tile>span{display:grid;place-items:center;flex:none;width:64px;height:64px;min-width:64px;margin:0;border:1px solid #e1d9ef;border-radius:20px;object-fit:cover;background:linear-gradient(145deg,#eee8ff,#e4f7ef);color:#7353bc;font-size:16px;font-weight:800}
.room-avatars .room-avatar-tile>b{display:block;max-width:100%;overflow:hidden;color:#514758;font-size:10px;line-height:1.6;text-overflow:ellipsis;white-space:nowrap;text-align:center}
.room-avatars:focus-visible{outline:2px solid #ae98e7;outline-offset:-2px}
@media(max-width:560px){.rooms-list .room-row{padding:15px;gap:12px}.rooms-list .room-row>.room-avatars{grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:18px 12px;padding:16px 4px;max-height:264px}.room-avatars .room-avatar-tile>img,.room-avatars .room-avatar-tile>span{width:60px;height:60px;min-width:60px}}
.room-title-row h2 { min-width: 0; overflow-wrap: anywhere; }
.people-preview > div {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(142px, 1fr));
    align-items: stretch;
    gap: 12px;
    max-height: 360px;
    margin-top: 14px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 3px 8px 10px 3px;
    scrollbar-gutter: stable;
}

.member-pill {
    position: relative;
    min-width: 0;
    min-height: 174px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 20px 12px 16px !important;
    overflow: hidden;
    border: 1px solid #ded8e3;
    border-radius: 17px !important;
    background: linear-gradient(180deg, #fff, #faf8fc) !important;
    text-align: center;
    box-shadow: 0 7px 22px #291d360b;
}
.member-pill:hover { transform: translateY(-3px); border-color: #aa98e9; box-shadow: 0 15px 34px #3e2a5919; }
.member-pill > img,
.member-pill > span:not(.member-overflow-wrap) {
    width: 78px;
    height: 78px;
    flex: 0 0 78px;
    display: grid;
    place-items: center;
    border: 1px solid #e0d8ee;
    border-radius: 22px;
    object-fit: cover;
    background: linear-gradient(145deg, #eee8ff, #ddf8f1);
    font-size: 16px;
    font-weight: 850;
}
.member-pill > b,
.member-pill > small { width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.member-pill > b { margin-top: 3px; color: #2b2530; font-size: 11px; }
.member-pill > small { color: #8d8592; font-size: 8px; }
.member-pill.presence-app { border-color: #8eb4ed; box-shadow: inset 0 0 0 1px #deebff, 0 7px 22px #291d360b; }

.member-overflow-wrap {
    position: absolute !important;
    z-index: 5;
    top: 10px;
    right: 10px;
    width: auto !important;
    height: auto !important;
    display: block !important;
    background: transparent !important;
}
.member-overflow-button,
.overflow-button {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border: 1px solid #e2dce6;
    border-radius: 10px;
    background: #ffffffeb;
    color: #625a68;
    cursor: pointer;
    font: 900 9px/1 inherit;
    transition: .18s;
}
.member-overflow-button:hover,
.overflow-button:hover,
.member-overflow-button[aria-expanded="true"],
.overflow-button[aria-expanded="true"] { transform: translateY(-1px); border-color: #cabbec; background: #eee8fa; color: #6244d2; }
.member-action-menu,
.action-menu {
    position: absolute;
    z-index: 100;
    top: 36px;
    right: 0;
    min-width: 190px;
    display: grid;
    padding: 7px;
    border: 1px solid #ded8e4;
    border-radius: 13px;
    background: #fff;
    box-shadow: 0 18px 50px #291d3633;
    animation: menu-in .18s cubic-bezier(.22,1,.36,1);
    transform-origin: top right;
}
.member-action-menu[hidden], .action-menu[hidden] { display: none !important; }
.member-action-menu.is-portal { position: fixed; z-index: 10000; right: auto; margin: 0; }
.member-action-menu button,
.action-menu button { width: 100%; padding: 11px 12px; border: 0; border-radius: 9px; background: transparent; color: #443d49; cursor: pointer; font: 700 9px inherit; text-align: left; }
.member-action-menu button:hover, .action-menu button:hover { background: #f5f2f7; }
.member-action-menu button.danger, .action-menu button.danger { color: #b73349; }
.overflow-wrap { position: relative; margin-left: auto; }
.overflow-wrap[hidden] { display: none; }
.danger-button { padding: 12px 18px; border: 1px solid #efc5cc; border-radius: 12px; background: #fff5f6; color: #b32c42; cursor: pointer; font: 800 10px inherit; }
@keyframes menu-in { from { opacity: 0; transform: translateY(-6px) scale(.96); } to { opacity: 1; transform: none; } }
html[dir="rtl"] .member-overflow-wrap { right: auto; left: 10px; }
html[dir="rtl"] .member-action-menu,
html[dir="rtl"] .action-menu { right: auto; left: 0; transform-origin: top left; }

@media (max-width: 560px) {
    .people-preview { padding: 14px; }
    .people-preview > div { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: 340px; gap: 9px; padding-right: 4px; }
    .member-pill { min-height: 158px; padding: 17px 9px 13px !important; }
    .member-pill > img,
    .member-pill > span:not(.member-overflow-wrap) { width: 68px; height: 68px; flex-basis: 68px; border-radius: 19px; }
}