/* 2026-10-02: airy teal / blue client and meeting surfaces. */
:root{--ink:#163346;--muted:#647f8b;--line:rgba(48,126,145,.13);--surface:rgba(255,255,255,.91);--accent:#087f92;--blue:#447bea;--green:#16b894;--danger:#ed5269;--shadow:0 12px 40px rgba(33,102,129,.08)}
body{background:linear-gradient(135deg,#ecfaf5 0%,#f4faff 55%,#fff7f0 100%);color:var(--ink)}
.ambient-a{background:#bceee1;opacity:.3}.ambient-b{background:#d2e5ff;opacity:.35}
.glass{background:var(--surface);border-color:rgba(255,255,255,.96)}
.rail{background:rgba(246,255,253,.94)}.sidebar{background:rgba(255,255,255,.94)}
.nav-btn{color:#6b8792}.nav-btn.active{background:#e2f7f2;color:#087e88;box-shadow:none}
.profile-avatar{background:linear-gradient(145deg,#28bca4,#368ee2)}
.chat-item:hover,.chat-item.pinned{background:#f5fcfa}
.chat-item.active,.chat-item.active:hover,.chat-item.pinned.active{background:#e5f5fb;box-shadow:inset 3px 0 #21a8bc}
.chat-item.active h3{color:#087789}.chat-item .unread{background:#f26b7d}
.search{background:#f1f8fb;border:1px solid #e5f1f5}.search input{color:var(--ink)}
.chat-view{background:#f8fcfe}.chat-header{background:rgba(255,255,255,.98);border-bottom:1px solid var(--line)}
.messages{background:linear-gradient(155deg,#f3fbfa,#f8fcff 65%,#fffaf4);color:var(--ink)}
.bubble{background:#fff;box-shadow:0 3px 14px rgba(37,107,133,.055)}
.mine .bubble{background:#d5f5eb;color:#164a4b;box-shadow:none}
.mine .bubble.file-bubble a,.mine .message-meta{color:#397b7b}
.sender,.message-meta{color:#6a8390}.group-system-message span{background:#e8f3f6;color:#577a86}
.composer{background:rgba(255,255,255,.98);border:1px solid #e2eff2;box-shadow:0 -4px 20px rgba(44,126,143,.035)}
.wechat-input-row textarea,.voice-hold{background:#f2f8fa;color:var(--ink)}
.composer-round{color:#3c7084}.composer-round:hover{background:#e6f6f3}#plusToggle{color:#098d98}
.send-btn,.primary-btn{background:#078c99;color:#fff}.primary-btn:hover,.send-btn:hover{background:#087785}
.switch.on{background:#1bb99c}.announcement{background:#fff7e7;color:#916725}
.plus-panel{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 10px}
.plus-panel button{color:#527382}.plus-panel button i{background:#f4faff;border-color:#e0eff5;color:#4e80d0}
.plus-panel [data-tool="voice-call"] i{background:#e8faf2;color:#159a80}.plus-panel [data-tool="video-call"] i{background:#e9f4ff;color:#367dd6}
.avatar-indigo{background:linear-gradient(145deg,#55b9de,#4c7be0)}.avatar-green{background:linear-gradient(145deg,#44c9ae,#179997)}
.sub-page,.content-page{background:#f4fafc}.sub-page>header{border-color:var(--line)}
.standalone-form input,.standalone-form textarea,.group-profile-editor input,.group-profile-editor textarea{background:#f6fbfd;color:var(--ink)}
.group-member-actions button{background:#ecf6fa;color:#32768c}.group-switches .switch{flex-shrink:0}
.group-exit-button{width:100%;margin-top:16px;border:1px solid #f4d9df;border-radius:16px;background:#fff7f8;padding:15px;color:#cc4861;cursor:pointer}
.group-create-name{display:grid;gap:8px;margin:12px 0;color:var(--muted);font-size:12px}.group-create-name input{border:1px solid var(--line);padding:12px;border-radius:12px;background:#f6fbfd;color:var(--ink)}
button:focus-visible{outline:2px solid #3ca8ce;outline-offset:3px}
@media(max-width:760px){body,.workspace{background:#f5fbfd}.rail{background:rgba(255,255,255,.98)}.content-page{background:#f4fafc}.composer{background:#fff}.chat-item.active,.chat-item.active:hover,.chat-item.pinned.active{background:#e5f5fb}}
/* Independent source slots; the focused fullscreen stage shows only the chosen source. */
.call-overlay.meeting-call{background:linear-gradient(150deg,#102b42,#17374a 55%,#183d43);color:#fff}
.meeting-call:not(.call-windowed) .call-window-button{top:calc(20px + var(--safe-top));left:20px;background:#244b61}
.meeting-call:not(.call-windowed) .call-top,.meeting-call:not(.video-call):not(.call-windowed) .call-top{top:calc(19px + var(--safe-top));left:72px!important;transform:none;align-items:flex-start;min-width:0;max-width:calc(100% - 220px);text-align:left;text-shadow:none}
.meeting-call:not(.call-windowed) .call-top h2{margin:0 0 7px;font-size:20px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.meeting-call:not(.call-windowed) .call-top p{color:#a5cfdb;font-size:12px}.meeting-call:not(.call-windowed) .call-top time{position:absolute;top:0;left:calc(100% + 18px);margin-top:3px;font-size:13px;color:#b6e6dd}
.meeting-call .call-orb{display:none}
.call-member-count{position:absolute!important;top:calc(27px + var(--safe-top));right:24px;padding:9px 12px;border-radius:12px;background:#23475b;color:#cee8ef;font-size:12px}
.meeting-call:not(.call-windowed) .call-media,.meeting-call:not(.video-call):not(.call-windowed) .call-media{display:grid;inset:calc(94px + var(--safe-top)) 24px calc(116px + var(--safe-bottom));grid-template-columns:repeat(var(--meeting-columns,2),minmax(0,1fr));grid-auto-rows:auto;align-content:center;gap:14px;padding:0;background:transparent;overflow:auto;border-radius:18px}
.meeting-call:not(.call-windowed) .call-video-slot,.meeting-call:not(.call-windowed) .call-media.swapped .call-video-slot{position:relative;inset:auto;width:100%;height:auto;min-height:0;aspect-ratio:16/9;border:1px solid #33556a;border-radius:18px;box-shadow:none;background:#10283d}
.meeting-call:not(.call-windowed) .call-video-slot video{object-fit:contain;background:#10283d;min-height:0;border-radius:0}
.meeting-call .call-video-slot::after{content:attr(data-label);position:absolute;bottom:10px;left:10px;max-width:calc(100% - 20px);padding:5px 9px;background:rgba(10,33,48,.85);border-radius:8px;color:#e3f6fa;font-size:11px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;pointer-events:none}
.meeting-call .call-avatar-placeholder{background:radial-gradient(ellipse at 45% 32%,#2b5869,#18384c);gap:8px}
.meeting-call .call-avatar-placeholder b{width:clamp(42px,9vw,76px);background:linear-gradient(140deg,#3b9da9,#417ba3);font-size:24px}
.meeting-call .call-avatar-placeholder img{width:clamp(48px,12vw,92px)}.meeting-call .call-avatar-placeholder em{font-size:12px;text-shadow:none}
.meeting-call:not(.call-windowed) .call-video-slot.screen-share-slot{grid-column:1/-1;aspect-ratio:16/9;max-height:48vh;border-color:#4ac1b2;background:#0d2638}
.meeting-call.screen-sharing:not(.call-windowed) .call-media{align-content:start}
.meeting-call:not(.call-windowed) .call-actions{left:50%;right:auto;bottom:calc(20px + var(--safe-bottom));gap:12px;padding:10px 14px;max-width:calc(100% - 24px);background:#224459;border:1px solid #335669;border-radius:24px}
.meeting-call .call-actions button{background:#335c72;width:68px;min-height:60px;border-radius:16px;color:#f1fbff;font-size:20px}
.meeting-call .call-actions button span{font-size:11px}.meeting-call .call-actions button.active{background:#217f7b}.meeting-call .call-actions .hangup,.meeting-call .call-actions .reject{background:#e85870}.meeting-call .call-actions .accept{background:#19a991}
.meeting-call .call-audio-unlock{bottom:calc(105px + var(--safe-bottom))}
.meeting-call.call-windowed .call-member-count,.meeting-call.call-windowed .call-video-slot::after{display:none}
.meeting-call.call-windowed .call-media{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:2px;overflow:auto}
.meeting-call.call-windowed .call-video-slot,.meeting-call.call-windowed .call-media.swapped .call-video-slot{position:relative;inset:auto;width:100%;height:100%;min-height:0;border:0;border-radius:0}
.meeting-call.call-windowed .call-video-slot video{object-fit:contain}.meeting-call.call-windowed .screen-share-slot{grid-column:1/-1}.meeting-call.call-windowed .call-top{display:none}
.native-call.meeting-call .call-top{max-width:calc(100% - 90px)}.native-call #activeCallActions [data-call="screen"]{display:none!important}
@media(max-width:760px){
 .meeting-call:not(.call-windowed) .call-window-button{top:calc(16px + var(--safe-top));left:12px;width:34px;height:34px}
 .meeting-call:not(.call-windowed) .call-top,.meeting-call:not(.video-call):not(.call-windowed) .call-top{left:58px!important;top:calc(15px + var(--safe-top));max-width:calc(100% - 158px)}
 .meeting-call:not(.call-windowed) .call-top h2{font-size:16px}.meeting-call:not(.call-windowed) .call-top time{position:static;font-size:11px;margin:5px 0 0}
 .call-member-count{top:calc(18px + var(--safe-top));right:12px;font-size:11px;padding:8px}
 .meeting-call:not(.call-windowed) .call-media,.meeting-call:not(.video-call):not(.call-windowed) .call-media{inset:calc(98px + var(--safe-top)) 10px calc(104px + var(--safe-bottom));grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .meeting-call:not(.call-windowed) .call-video-slot{border-radius:12px}.meeting-call .call-video-slot::after{left:6px;bottom:6px;padding:4px 6px;font-size:10px}
 .meeting-call:not(.call-windowed) .call-actions{gap:6px;padding:8px;bottom:calc(14px + var(--safe-bottom));border-radius:20px}
 .meeting-call .call-actions button{width:52px;min-height:56px;font-size:18px;border-radius:13px}.meeting-call .call-actions button span{font-size:10px}
 .meeting-call:not(.call-windowed) .screen-share-slot{max-height:36vh}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* Grid rows must size to the cards, never shrink beneath their aspect ratios. */
.meeting-call:not(.call-windowed) .call-media{grid-auto-rows:max-content;align-items:start}
.meeting-call:not(.call-windowed) .call-video-slot{align-self:start}
.group-contact-row{width:100%;border:0;background:#fff;color:var(--ink);text-align:left;cursor:pointer}.group-contact-row:hover{background:#f1faf7}.group-contact-row>.contact-open{pointer-events:none}.group-directory-create{width:100%;padding:15px;border:0;background:#eef9f5;color:#078b91;font:inherit;cursor:pointer}
@media(min-width:761px){.meeting-call.screen-sharing:not(.call-windowed) .call-media{grid-template-columns:repeat(var(--presentation-columns,6),minmax(0,1fr))}.meeting-call.screen-sharing:not(.call-windowed) .screen-share-slot{max-height:56vh}}
.boot-screen{background:linear-gradient(145deg,#eefbf6,#f5fbff);color:#5d7e8b}.boot-screen i,.boot-screen strong{color:#087f92}.boot-screen button{background:#087f92}
/* Focused meeting stage: hidden members live in the chooser, not an avatar wall. */
.meeting-call.meeting-focus-mode .call-media{display:block!important;overflow:hidden!important;padding:0!important}
.meeting-call.meeting-focus-mode .call-video-slot{display:none!important}
.meeting-call.meeting-focus-mode .call-video-slot.meeting-focused{display:block!important;position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-height:none!important;aspect-ratio:auto!important;min-height:0!important;border-radius:16px!important}
.meeting-call.meeting-focus-mode .call-video-slot video{object-fit:contain!important}
.call-member-count{border:0;cursor:pointer;min-height:44px;z-index:8}
.return-to-share{position:absolute;z-index:8;top:calc(69px + var(--safe-top));right:24px;border:1px solid #468b92;border-radius:10px;padding:7px 12px;background:#1b565e;color:#e6fffa;font-size:12px;cursor:pointer}
.meeting-members{position:absolute;z-index:15;right:16px;top:calc(80px + var(--safe-top));bottom:calc(112px + var(--safe-bottom));width:min(380px,calc(100% - 32px));background:#fff;color:#193d50;box-shadow:0 12px 50px #001d3866;border-radius:20px;display:flex;flex-direction:column;overflow:hidden}
.meeting-members header{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid #e3eff4}.meeting-members header button{width:44px;height:44px;border:0;background:#edf7fa;border-radius:12px;color:#377284;font-size:26px;cursor:pointer}
.meeting-members p{font-size:12px;line-height:1.6;padding:0 16px;color:#62818d}#meetingMemberList{overflow:auto;flex:1;overscroll-behavior:contain;padding:0 12px 16px}
.meeting-member-row{display:flex;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid #eaf2f5}.meeting-member-initial{display:grid;place-items:center;flex-shrink:0;width:38px;height:38px;border-radius:13px;background:#e0f6f1;color:#168b83;font-weight:700}.meeting-member-row>div{flex:1;min-width:0}.meeting-member-row strong{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.meeting-member-row small{display:block;font-size:10px;color:#74909c;margin-top:5px}.meeting-member-row aside{display:flex;flex-direction:column;gap:4px}.meeting-member-row aside button{border:0;min-height:44px;min-width:64px;border-radius:10px;background:#e9f5fb;color:#197f98;font-size:12px;cursor:pointer}.meeting-member-row aside button[aria-pressed=true]{background:#158b91;color:#fff}
.meeting-call.call-windowed .meeting-members,.meeting-call.call-windowed .return-to-share{display:none!important}
@media(max-width:760px){.meeting-members{inset:auto 0 0;width:100%;height:min(72dvh,640px);padding-bottom:var(--safe-bottom);border-radius:22px 22px 0 0}.return-to-share{top:calc(69px + var(--safe-top));right:12px}.meeting-call.meeting-focus-mode .call-media{inset:calc(104px + var(--safe-top)) 10px calc(100px + var(--safe-bottom))!important}.meeting-call .call-actions button{width:clamp(44px,12vw,52px)}}
@media(max-height:500px) and (orientation:landscape){.meeting-call:not(.call-windowed) .call-top{top:calc(8px + var(--safe-top))!important}.call-member-count{top:calc(6px + var(--safe-top))}.meeting-call.meeting-focus-mode:not(.call-windowed) .call-media{inset:calc(60px + var(--safe-top)) 12px calc(78px + var(--safe-bottom))!important}.meeting-call:not(.call-windowed) .call-actions{bottom:calc(6px + var(--safe-bottom));padding:5px 10px}.meeting-call .call-actions button{min-height:48px}.return-to-share{top:calc(7px + var(--safe-top));right:130px}.meeting-members{top:0;bottom:0;height:100dvh;width:min(400px,70vw);right:0;left:auto}}
/* Override the legacy call-overlay direct-child positioning/stacking rules. */
#meetingMembers{position:absolute!important;z-index:15!important}#returnToShare{position:absolute!important;z-index:8!important}#callMemberCount{z-index:8!important}
/* Immersive calling: media fills the viewport; controls float and disappear. */
.meeting-call.meeting-focus-mode:not(.call-windowed) .call-media{inset:0!important;border-radius:0!important;background:#07151f!important}
.meeting-call.meeting-focus-mode:not(.call-windowed) .call-video-slot.meeting-focused{inset:0!important;border:0!important;border-radius:0!important;background:#07151f!important}
.meeting-call.meeting-focus-mode:not(.call-windowed) .call-video-slot video{background:#07151f!important}
.meeting-call:not(.call-windowed) .call-top{max-width:calc(100% - 230px)!important}.meeting-call:not(.call-windowed) .call-top h2{text-shadow:0 1px 8px #000}
.meeting-call:not(.call-windowed) .call-actions{background:rgba(16,42,57,.82);border:0;box-shadow:none}.meeting-call .call-actions button{background:rgba(49,91,111,.86)}
.meeting-call:not(.call-windowed)::before{content:"";position:absolute;z-index:1;pointer-events:none;inset:0;background:linear-gradient(#0009,transparent 18%,transparent 76%,#0007);transition:opacity .18s ease}
.meeting-call.controls-hidden:not(.call-windowed)::before{opacity:0}
.meeting-call:not(.call-windowed) .call-top,.meeting-call:not(.call-windowed) .call-actions,#callWindowButton,#callMemberCount,#returnToShare{transition:opacity .18s ease}
.meeting-call.controls-hidden:not(.call-windowed) .call-top,.meeting-call.controls-hidden:not(.call-windowed) .call-actions,.meeting-call.controls-hidden:not(.call-windowed) #callWindowButton,.meeting-call.controls-hidden:not(.call-windowed) #callMemberCount,.meeting-call.controls-hidden:not(.call-windowed) #returnToShare,.meeting-call.controls-hidden:not(.call-windowed) .call-video-slot::after{opacity:0;visibility:hidden;pointer-events:none}
.meeting-call.meeting-focus-mode .call-video-slot::after{bottom:calc(115px + var(--safe-bottom));background:#0006}
@media(max-width:760px){.meeting-call:not(.call-windowed) .call-top{max-width:calc(100% - 158px)!important}.meeting-call.meeting-focus-mode .call-video-slot::after{bottom:calc(98px + var(--safe-bottom))}}
@media(max-height:500px) and (orientation:landscape){.meeting-call.meeting-focus-mode .call-video-slot::after{bottom:calc(75px + var(--safe-bottom))}}
/* More is anchored to the bottom-right; participant hosting is never a self-device submenu. */
.meeting-call:not(.call-windowed) #activeCallActions{left:auto;right:12px;transform:none;max-width:calc(100% - 24px)}
#meetingMorePanel{position:absolute!important;z-index:14!important;right:12px;bottom:calc(108px + var(--safe-bottom));width:min(310px,calc(100% - 24px));padding:14px;border-radius:18px;background:#fff;color:#214455;box-shadow:0 10px 40px #0005}#meetingMorePanel header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}#meetingMorePanel header button{border:0;background:#eef7fa;border-radius:10px;width:44px;height:44px;color:#317d91;font-size:24px}#meetingMorePanel #callMemberCount{position:static!important;width:100%;text-align:left;background:#e8f7f5;color:#197e82;min-height:48px}#meetingMorePanel p{font-size:11px;line-height:1.6;color:#65818b}.host-member-actions{display:grid;gap:12px}.host-member-actions button,#backToMeetingMembers{min-height:48px;border:0;border-radius:12px;background:#eaf7f5;color:#16838a;padding:12px}.host-member-actions [data-host-action=remove]{background:#fff0f3;color:#c54d65}
.host-device-consent{position:absolute!important;z-index:30!important;inset:0;display:grid;place-items:center;background:#001627b0;padding:18px}.host-device-consent>div{max-width:380px;width:100%;background:#fff;color:#214455;padding:24px;border-radius:20px}.host-device-consent p{font-size:13px;color:#708895}.host-device-consent button{min-height:48px;padding:10px 16px;border:0;border-radius:12px;background:#eaf5f8;margin-right:8px}.host-device-consent [data-accept]{background:#128b92;color:#fff}
.meeting-call.call-windowed #meetingMorePanel{display:none!important}
@media(max-width:760px){.meeting-call:not(.call-windowed) #activeCallActions{right:8px;max-width:calc(100% - 16px);gap:4px;padding:8px}.meeting-call .call-actions button{width:clamp(42px,11.5vw,50px)}#meetingMorePanel{right:8px;bottom:calc(92px + var(--safe-bottom))}}
/* Full-width, evenly spaced controls: centered as a row, never a tight pill. */
.meeting-call:not(.call-windowed) #activeCallActions{
 left:50%!important;right:auto!important;transform:translateX(-50%)!important;
 width:calc(100% - 80px)!important;max-width:none!important;
 display:grid!important;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);
 justify-content:center!important;align-items:center;gap:16px!important;
 padding:0!important;bottom:calc(24px + var(--safe-bottom));
 background:transparent!important;border:0!important;border-radius:0!important;
 box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
}
.meeting-call:not(.call-windowed) #activeCallActions>button{
 width:100%!important;min-width:0;min-height:84px;height:auto;
 padding:8px 0;gap:9px;border:0;border-radius:0!important;
 background:transparent!important;box-shadow:none!important;color:#f5fbff;
}
.meeting-call:not(.call-windowed) #activeCallActions>button>i{
 display:grid;place-items:center;flex-shrink:0;width:56px;height:56px;
 border-radius:50%;background:rgba(48,78,95,.9);font-size:23px;
 transition:background .18s ease,box-shadow .18s ease;
}
.meeting-call:not(.call-windowed) #activeCallActions>button>span{
 font-size:13px;line-height:1.3;white-space:nowrap;text-shadow:0 1px 5px #0009;
}
.meeting-call:not(.call-windowed) #activeCallActions>button.active>i{background:#456876;color:#ffdce3;transform:none}
.meeting-call:not(.call-windowed) #activeCallActions>#shareScreenButton.active>i{background:#149f95;color:#fff}
.meeting-call:not(.call-windowed) #activeCallActions>.hangup>i{background:#ed5269;transform:none!important}
.meeting-call:not(.call-windowed) #activeCallActions>.hangup>i::before{display:block;transform:rotate(135deg)}
.meeting-call:not(.call-windowed) #activeCallActions>button:focus-visible{outline:0}
.meeting-call:not(.call-windowed) #activeCallActions>button:focus-visible>i{outline:3px solid #c6fff0;outline-offset:4px}
@media(hover:hover){.meeting-call:not(.call-windowed) #activeCallActions>button:hover>i{box-shadow:0 0 0 5px #ffffff1a}}
@media(max-width:760px){
 .meeting-call:not(.call-windowed) #activeCallActions{width:calc(100% - 16px)!important;gap:4px!important;bottom:calc(14px + var(--safe-bottom))}
 .meeting-call:not(.call-windowed) #activeCallActions>button{min-height:74px;padding:6px 0;gap:8px}
 .meeting-call:not(.call-windowed) #activeCallActions>button>i{width:48px;height:48px;font-size:21px}
 .meeting-call:not(.call-windowed) #activeCallActions>button>span{font-size:11px}
}
@media(max-width:340px){.meeting-call:not(.call-windowed) #activeCallActions>button>i{width:44px;height:44px;font-size:20px}}
@media(max-height:500px) and (orientation:landscape){
 .meeting-call:not(.call-windowed) #activeCallActions{width:calc(100% - 48px)!important;bottom:calc(8px + var(--safe-bottom))}
 .meeting-call:not(.call-windowed) #activeCallActions>button{min-height:64px;padding:3px 0;gap:6px}
 .meeting-call:not(.call-windowed) #activeCallActions>button>i{width:44px;height:44px;font-size:20px}
 .meeting-call:not(.call-windowed) #activeCallActions>button>span{font-size:11px}
}


/* Private calls have no conference member picker. */
.meeting-call:not(.group-call) #meetingMoreButton,.meeting-call:not(.group-call) #meetingMorePanel,.meeting-call:not(.group-call) #callMemberCount,.meeting-call:not(.group-call) #meetingMembers,.meeting-call:not(.group-call) #meetingHostHint,.meeting-call:not(.group-call) .demo-role{display:none!important}
/* A real contact card is visually distinct from a text bubble. */
.contact-card-message{display:block!important;width:292px;max-width:100%;padding:0!important;border:1px solid #d9eae8!important;border-radius:16px!important;background:#fff!important;color:#234b58!important;text-align:left;overflow:hidden;cursor:pointer}
.contact-card-main{display:flex;align-items:center;gap:12px;padding:16px}.contact-card-main>.avatar{width:48px;height:48px;border-radius:14px;flex-shrink:0}.contact-card-copy{flex:1;min-width:0}.contact-card-copy strong{display:block;font-size:15px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.contact-card-copy>span{display:block;font-size:12px;color:#64818b;margin-top:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.contact-card-copy small{display:block;font-size:11px;line-height:1.5;color:#7e959e;margin-top:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.contact-card-main>.fa-angle-right{font-size:20px;color:#83a0a6;flex-shrink:0}.contact-card-footer{display:flex;align-items:center;gap:7px;padding:9px 16px;border-top:1px solid #e8f0f1;background:#f5fbfa;color:#59818a;font-size:11px}.contact-card-footer small{margin-left:auto;font-size:10px;color:#82999f}.mine .contact-card-message{background:#fff!important}.contact-card-message:focus-visible{outline:3px solid #20a9a2;outline-offset:3px}
@media(max-width:760px){.contact-card-message{width:276px}.contact-card-main{padding:14px}}

/* Hidden incoming/active actions must beat the responsive toolbar display rule. */
.meeting-call:not(.call-windowed) #activeCallActions.hidden{display:none!important}

/* The publishing device displays status, never its own recursive screen preview. */
.meeting-call .share-status{background:#07151f!important;color:#eef8fc}
.share-status-content{display:flex;height:100%;padding:90px 24px 150px;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:12px}
.share-status-content>i{display:grid;place-items:center;width:90px;height:90px;border-radius:28px;background:#123c46;color:#65dccb;font-size:42px}
.share-status-content h2{font-size:24px;margin:10px 0}.share-status-content p{font-size:14px;line-height:1.8;margin:0;color:#b8ced8}.share-status-content small{font-size:12px;line-height:1.7;color:#85b5b8;max-width:440px}
.meeting-call.self-sharing #activeCallActions>[data-call="camera"]{opacity:.55}
.meeting-call.call-windowed .share-status-content{padding:12px;gap:4px}.meeting-call.call-windowed .share-status-content>i{width:40px;height:40px;border-radius:12px;font-size:20px}.meeting-call.call-windowed .share-status-content h2{font-size:13px;margin:3px}.meeting-call.call-windowed .share-status-content p,.meeting-call.call-windowed .share-status-content small{display:none}

/* Phone actions use a round icon with a separate label, never a tall colored tile. */
#callOverlay #incomingCallActions.hidden,#callOverlay #activeCallActions.hidden{display:none!important}
#callOverlay #incomingCallActions:not(.hidden){display:flex!important;left:50%!important;right:auto!important;transform:translateX(-50%)!important;bottom:calc(36px + var(--safe-bottom))!important;gap:clamp(54px,20vw,116px);padding:0;background:transparent;border:0;box-shadow:none}
#callOverlay #incomingCallActions>button{display:flex;flex-direction:column;align-items:center;justify-content:center;width:88px!important;min-height:94px!important;height:auto!important;flex-shrink:0;border:0;border-radius:0;background:transparent!important;box-shadow:none!important;padding:0;gap:12px;touch-action:manipulation}
#callOverlay #incomingCallActions>button>i{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;transform:none!important;box-shadow:none}
#callOverlay #incomingCallActions>.accept>i{background:#20b65a}
#callOverlay #incomingCallActions>.reject>i{background:#f34a4a}
#callOverlay #incomingCallActions>button>i::before,#callOverlay #activeCallActions>.hangup>i::before{display:none!important}
#callOverlay #incomingCallActions>button>span{font-size:14px;color:#fff;font-weight:400;line-height:18px;text-shadow:0 1px 4px #0008}
#callOverlay #incomingCallActions svg,#callOverlay #activeCallActions>.hangup svg{display:block;width:28px;height:28px;transform:none!important}
#callOverlay #incomingCallActions>button:focus-visible>i{outline:3px solid #d9ffee;outline-offset:4px}
#callOverlay #activeCallActions>.hangup>i{background:#f34a4a}
@media(max-height:500px) and (orientation:landscape){#callOverlay #incomingCallActions:not(.hidden){bottom:calc(14px + var(--safe-bottom))!important;gap:90px}#callOverlay #incomingCallActions>button{min-height:78px!important;gap:8px}#callOverlay #incomingCallActions>button>i{width:54px;height:54px}}
/* One-to-one video: remote stage + local movable preview, tap preview to exchange. */
#callOverlay.private-pair #callMedia{inset:0!important;display:block!important;overflow:hidden!important;background:#101214!important}
#callOverlay.private-pair #callMedia .call-video-slot.private-main{display:block!important;position:absolute!important;inset:0!important;width:100%!important;height:100%!important;aspect-ratio:auto!important;border:0!important;border-radius:0!important;z-index:1}
#callOverlay.private-pair #callMedia .call-video-slot.private-pip{display:block!important;position:absolute!important;inset:auto!important;top:calc(86px + var(--safe-top))!important;right:12px!important;width:clamp(96px,28vw,136px)!important;height:auto!important;aspect-ratio:3/4!important;min-height:0!important;border:1px solid #ffffff35!important;border-radius:12px!important;z-index:4;overflow:hidden;cursor:pointer;touch-action:none;box-shadow:0 5px 18px #0006}
#callOverlay.private-pair #callMedia .private-pip.pip-dragged{left:var(--pip-left)!important;top:var(--pip-top)!important;right:auto!important}
#callOverlay.private-pair #callMedia .call-video-slot video{object-fit:cover!important;background:#101214!important}
#callOverlay.private-pair #callMedia .private-pip::after{display:none!important}
#callOverlay.private-pair #callMedia .private-pip .call-avatar-placeholder{gap:7px;background:#252a2f}
#callOverlay.private-pair #callMedia .private-pip .call-avatar-placeholder img,#callOverlay.private-pair #callMedia .private-pip .call-avatar-placeholder b{width:52px;height:52px;font-size:22px}
#callOverlay.private-pair #callMedia .private-pip .call-avatar-placeholder em{font-size:11px;max-width:90%;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}
@media(max-height:500px) and (orientation:landscape){#callOverlay.private-pair #callMedia .call-video-slot.private-pip{top:calc(64px + var(--safe-top))!important;width:96px!important}}

#callOverlay.private-pair.call-windowed #callMedia .call-video-slot.private-pip{top:32px!important;right:8px!important;width:48px!important;border-radius:7px!important}
#callOverlay.private-pair.call-windowed #callMedia .private-pip .call-avatar-placeholder img,#callOverlay.private-pair.call-windowed #callMedia .private-pip .call-avatar-placeholder b{width:28px;height:28px;font-size:16px}
#callOverlay.private-pair.call-windowed #callMedia .private-pip .call-avatar-placeholder em{display:none}
#callOverlay.private-pair.call-windowed #callMedia .private-pip.pip-dragged{top:var(--pip-top)!important}

/* Full-screen focus insets can exceed the height of the chat's floating window. */
#callOverlay.meeting-focus-mode.call-windowed #callMedia{inset:0!important;padding:0!important}
.meeting-call.call-windowed #callAudioUnlock:not(.hidden){display:block!important;top:auto;bottom:8px;max-width:calc(100% - 16px);padding:7px 10px;font-size:12px;white-space:normal;text-align:center}

/* Mobile-first floating call: portrait shell and vertically stacked participants. */
#callOverlay.call-windowed{width:min(180px,calc(100vw - 24px),calc((100dvh - 110px)*.75));height:auto;aspect-ratio:3/4;max-height:calc(100dvh - 110px);border-radius:16px}
#callOverlay.call-windowed #callMedia{grid-template-columns:minmax(0,1fr);grid-auto-rows:minmax(0,1fr);gap:2px}
#callOverlay.private-pair.call-windowed #callMedia{display:grid!important;grid-template-columns:minmax(0,1fr)!important;grid-template-rows:1fr 1fr!important;gap:2px!important}
#callOverlay.private-pair.call-windowed #callMedia .call-video-slot.private-main,
#callOverlay.private-pair.call-windowed #callMedia .call-video-slot.private-pip,
#callOverlay.private-pair.call-windowed #callMedia .private-pip.pip-dragged{position:relative!important;inset:auto!important;width:100%!important;height:100%!important;aspect-ratio:auto!important;min-height:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;cursor:move}
#callOverlay.private-pair.call-windowed #remoteCallSlot{order:0}
#callOverlay.private-pair.call-windowed #localCallSlot{order:1}
#callOverlay.private-pair.call-windowed #callMedia .call-avatar-placeholder img{width:38px;height:38px}
#callOverlay.private-pair.call-windowed #callMedia .call-avatar-placeholder em{display:block;font-size:10px}
#callOverlay.call-windowed .call-window-button{width:34px;height:34px;top:7px;left:7px;background:#10212bb3}
/* Native surfaces own both video and controls; never cover them with an HTML twin. */
#callOverlay.native-pip-active,#callOverlay.native-overlay-active{display:none!important}
#callOverlay.native-call.call-windowed .call-top{display:flex;left:14px!important;right:14px;top:54px!important;max-width:none;text-align:left}
#callOverlay.native-call.call-windowed .call-top p{display:block;white-space:normal;line-height:1.6}

/* Address book: quiet typography, clear entry points and generous touch targets. */
#contactsPage{background:#f5f8fa;padding:28px clamp(16px,4vw,44px) 36px}
#contactsPage .contact-page-head{display:flex;align-items:center;justify-content:space-between;margin:0 0 22px;min-height:62px}
#contactsPage .contact-page-head>div{display:block}
#contactsPage .contact-page-head h2{margin:0;font-size:26px;font-weight:750;letter-spacing:-.6px;color:#173d47}
.contact-page-head p{margin:7px 0 0;font-size:12px;color:#799099}.contact-page-head p span{margin:0 7px;color:#bdcbd0}
#contactsPage .contact-add-button{display:grid;place-items:center;width:44px;height:44px;border:1px solid #d3eae5;border-radius:15px;background:#e3f3ee;color:#178879;font-size:18px;cursor:pointer}
#contactsPage .mobile-contact-search{height:48px;margin:0 0 18px;padding:0 14px;gap:10px;border:1px solid #e3ecef;border-radius:14px;background:#fff;box-shadow:0 3px 12px #213d4903;color:#91a2aa}
#contactsPage .mobile-contact-search:focus-within{border-color:#72bdb2;box-shadow:0 0 0 3px #138d7d0d}
#contactsPage .mobile-contact-search input{min-width:0;font-size:14px;color:#294d58}#contactsPage .mobile-contact-search input::placeholder{color:#98a9b0}
#contactsPage .mobile-contact-search button{width:36px;height:40px;flex-shrink:0}
.contact-shortcuts{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:10px}
#contactsPage .contact-shortcuts>button{display:flex;align-items:center;gap:10px;min-width:0;min-height:80px;padding:14px 12px;border:1px solid #e4edef;border-radius:17px;background:#fff;text-align:left;cursor:pointer}
#contactsPage .contact-shortcuts>button>span{display:grid;place-items:center;flex:0 0 38px;width:38px;height:38px;border-radius:12px;font-size:17px;background:#fff1e4;color:#cc8a45}
#contactsPage .contact-shortcuts>.contact-create-shortcut>span{background:#e9f2fc;color:#568bd0}
.contact-shortcuts>button>div{display:flex;flex:1;min-width:0;flex-direction:column;gap:5px}
.contact-shortcuts strong{font-size:13px;font-weight:650;color:#284651;white-space:nowrap}.contact-shortcuts small{font-size:10px;color:#8c9ea5;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.contact-shortcuts .fa-angle-right{color:#afbec4;font-size:14px}
#contactsPage .contact-tabs{display:flex;gap:8px;margin:25px 0 16px;padding-bottom:12px;border-bottom:1px solid #e2ebee}
.contact-tabs button{min-height:40px;padding:0 15px;border:0;border-radius:12px;background:transparent;color:#80939c;font-size:14px;cursor:pointer}.contact-tabs button.active{background:#dfefe9;color:#187868;font-weight:650}.contact-tabs button span{margin-left:4px;font-size:11px;font-variant-numeric:tabular-nums;opacity:.7}
#contactsPage .contact-book{margin:0 0 22px}#contactsPage .contact-book>h3{align-items:center;gap:7px;margin:0 4px 10px;color:#81949d;font-size:11px;font-weight:500;letter-spacing:1px}#contactsPage .contact-book>h3 span{letter-spacing:0}
#contactsPage .contact-book .contact-list{border:1px solid #e4edef;border-radius:18px;box-shadow:0 4px 18px #274a5d03}
#contactsPage .contact-book .contact-row{display:flex;align-items:center;gap:12px;min-height:78px;padding:13px 15px;border-bottom:1px solid #f0f4f5;background:#fff}#contactsPage .contact-book .contact-row:last-child{border-bottom:0}
#contactsPage .contact-avatar-button{position:relative}#contactsPage .contact-row .avatar{width:46px;height:46px;flex-shrink:0;border-radius:15px}
.contact-online-dot{position:absolute;right:-2px;bottom:0;width:11px;height:11px;border:2px solid #fff;border-radius:50%;background:#34b88d}
#contactsPage .contact-open{padding:0;gap:6px;overflow:hidden}#contactsPage .contact-open strong{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;font-weight:600;color:#284651}#contactsPage .contact-open small{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;color:#92a0a7}
.contact-official{display:inline-block;vertical-align:middle;margin-left:7px;padding:2px 5px;border-radius:5px;background:#e5f4f0;color:#279a84;font-style:normal;font-size:9px;font-weight:500}
#contactsPage .contact-more{flex:0 0 40px;width:40px;height:44px;border-radius:12px;background:transparent;color:#b4c1c6;font-size:19px;cursor:pointer}#contactsPage .contact-more:hover{background:#edf7f4;color:#238f7d}
#contactsPage .group-contact-row{width:100%;border:0;text-align:left;cursor:pointer}#contactsPage .group-contact-row>.fa-angle-right{padding:12px;color:#b4c1c6}
#contactsPage .group-directory-create{min-height:48px;color:#279781;background:#fbfefd;border-top:1px solid #eff4f3}
#contactsPage .empty-state{min-height:160px;padding:26px 18px}#contactsPage .empty-state h3{font-size:14px;color:#5f7c87}#contactsPage .empty-state p{font-size:12px;line-height:1.8}#contactsPage .contacts-empty{padding-bottom:20px}
#contactsPage .friend-request-area{padding:14px;border:1px solid #e4edef;border-radius:17px;background:#fff}#contactsPage .friend-request-area h3{font-size:12px;color:#75909b}#contactsPage .friend-request-area .contact-row{gap:8px}#contactsPage .friend-request-area .copy{min-width:0;flex:1}#contactsPage .friend-request-area .copy h4,#contactsPage .friend-request-area .copy p{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#contactsPage .friend-request-area .compact{padding:8px;min-height:40px;font-size:11px}
@media(max-width:760px){#contactsPage{padding:calc(20px + var(--safe-top)) 18px 30px}#contactsPage .contact-page-head{margin-bottom:18px}#contactsPage .contact-page-head h2{font-size:25px}.contact-shortcuts{gap:8px}#contactsPage .contact-shortcuts>button{padding:12px 10px;gap:8px}.contact-shortcuts>button>.fa-angle-right{display:none}}
@media(max-width:360px){#contactsPage{padding-left:12px;padding-right:12px}.contact-shortcuts{grid-template-columns:1fr}#contactsPage .contact-shortcuts>button{min-height:66px}.contact-shortcuts small{font-size:11px}}