/* Drop 4: pings, member list rows for DMs and groups, call screen */
.msg.mention { background: rgba(240, 178, 50, .1); box-shadow: inset 2px 0 0 #f0b232; }
.msg.mention:hover { background: rgba(240, 178, 50, .16); }
.mention-chip { border-radius: 3px; padding: 0 2px; font-weight: 500; color: #c9cdfb; background: rgba(88, 101, 242, .3); }
.mention-chip.user { cursor: pointer; }
.mention-chip.user:hover { background: #5865f2; color: #fff; }
.mention-chip.user.me, .mention-chip.everyone { background: rgba(250, 166, 26, .2); color: #f0b232; }
.clickable { cursor: pointer; }
.author.clickable:hover { text-decoration: underline; }

.mention-pop { position: fixed; z-index: 70; max-height: 280px; overflow-y: auto; box-sizing: border-box; background: #2b2d31; border: 1px solid #1e1f22; border-radius: 6px; padding: 6px; box-shadow: 0 8px 20px rgba(0, 0, 0, .45); }
.mention-opt { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 4px; color: #dbdee1; cursor: pointer; }
.mention-opt.active, .mention-opt:hover { background: #404249; }
.mention-opt .mo-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mention-opt .mo-note { color: #949ba4; font-size: 12px; }
.mention-opt .mo-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.mention-opt .mo-at { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #5865f2; color: #fff; font-weight: 700; flex: none; }

.mp-text { display: flex; flex-direction: column; min-width: 0; flex: 1; text-align: left; }
.mp-text .mp-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-sub { color: #949ba4; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-invite { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 16px; padding: 10px; background: #2b2d31; border: 0; border-radius: 4px; color: #dbdee1; font: inherit; font-weight: 500; cursor: pointer; }
.mp-invite:hover { background: #35373c; }

.callstage { flex: none; background: #000; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 18px 12px 14px; max-height: 46vh; min-height: 150px; box-sizing: border-box; }
.callstage[hidden] { display: none; }
.cs-grid { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center; flex: 1; min-height: 0; width: 100%; }
.cs-tile { position: relative; display: grid; place-items: center; }
.cs-av { width: 84px; height: 84px; font-size: 28px; border-radius: 50%; box-shadow: 0 0 0 3px transparent; transition: box-shadow .1s; }
.cs-tile.speaking .cs-av { box-shadow: 0 0 0 3px #23a559; }
.cs-tile.video { width: min(320px, 44vw); aspect-ratio: 16 / 9; background: #111214; border-radius: 8px; overflow: hidden; box-shadow: 0 0 0 3px transparent; }
.cs-tile.video.speaking { box-shadow: 0 0 0 3px #23a559; }
.cs-video { width: 100%; height: 100%; object-fit: cover; background: #000; }
.cs-video.mirror { transform: scaleX(-1); }
.cs-name { position: absolute; left: 6px; bottom: 6px; display: inline-flex; align-items: center; gap: 4px; max-width: calc(100% - 12px); padding: 2px 8px; border-radius: 4px; background: rgba(0, 0, 0, .6); color: #fff; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-tile:not(.video) .cs-name { position: static; margin-top: 6px; background: transparent; }
.cs-tile:not(.video) { grid-template-columns: auto; gap: 0; justify-items: center; }
.cs-bar { display: flex; gap: 10px; padding: 6px 10px; background: #1e1f22; border-radius: 999px; }
.cs-btn { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #2b2d31; color: #f2f3f5; cursor: pointer; }
.cs-btn:hover, .cs-btn:focus-visible { background: #404249; outline: none; }
.cs-btn.off { background: #f2f3f5; color: #1e1f22; }
.cs-btn.hang { background: #da373c; color: #fff; }
.cs-btn.hang:hover { background: #a12828; }

/* Drop 5: screen sharing + camera flip */
.cs-btn.live { background: #23a559; color: #fff; }
.cs-grid { overflow: auto; }
.cs-tile.screen { width: min(640px, 92vw); }
.cs-tile.screen .cs-video { object-fit: contain; }
.cs-tile:fullscreen { width: 100vw; height: 100vh; aspect-ratio: auto; border-radius: 0; }
.cs-tile:fullscreen .cs-video { object-fit: contain; }

/* Drop 6: full screen button, share menu */
.cs-fs { position: absolute; top: 6px; right: 6px; z-index: 2; display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 8px; background: rgba(0, 0, 0, .6); color: #fff; cursor: pointer; }
.cs-fs:hover, .cs-fs:focus-visible { background: rgba(0, 0, 0, .85); outline: none; }
@media (pointer: coarse) { .cs-fs { width: 44px; height: 44px; } }
.cs-tile:-webkit-full-screen { width: 100vw; height: 100vh; aspect-ratio: auto; border-radius: 0; background: #000; }
.cs-tile:-webkit-full-screen .cs-video { object-fit: contain; }
.cs-tile:fullscreen { height: 100dvh; background: #000; }
.cs-tile:fullscreen .cs-fs { top: max(10px, env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right)); }
.cs-menu { display: flex; flex-direction: column; gap: 6px; width: min(340px, 92vw); padding: 10px; background: #1e1f22; border-radius: 10px; }
.cs-opt { padding: 10px 12px; border: 0; border-radius: 6px; background: #2b2d31; color: #f2f3f5; font: inherit; font-weight: 500; text-align: left; cursor: pointer; }
.cs-opt:hover, .cs-opt:focus-visible { background: #404249; outline: none; }
.cs-note { color: #949ba4; font-size: 12px; line-height: 1.35; }

/* Drop 6: people being rung */
.cs-tile.ringing .cs-av { opacity: .6; animation: cs-ringing 1.4s ease-in-out infinite; }
.cs-tile.ringing .cs-name { color: #b5bac1; }
@keyframes cs-ringing { 0% { box-shadow: 0 0 0 3px #4e5058; } 70% { box-shadow: 0 0 0 11px rgba(78, 80, 88, 0); } 100% { box-shadow: 0 0 0 3px #4e5058; } }

/* Drop 6: call banner for people outside the call */
.callbanner { flex: none; display: flex; align-items: center; gap: 12px; padding: 8px 14px; background: #111214; border-bottom: 1px solid #1e1f22; }
.callbanner[hidden] { display: none; }
.cb-avs { display: flex; gap: 8px; flex: none; }
.cb-av { width: 36px; height: 36px; font-size: 14px; border-radius: 50%; box-shadow: 0 0 0 2px transparent; transition: box-shadow .1s; }
.cb-av.speaking { box-shadow: 0 0 0 3px #23a559; }
.cb-text { flex: 1; min-width: 0; color: #b5bac1; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-join { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: #23a559; color: #fff; cursor: pointer; }
.cb-join:hover, .cb-join:focus-visible { background: #1a8a47; outline: none; }