/* Shared call surface and scoped chat composer. Existing control IDs retain their behavior. */
:root { --call-bg:#102b29; --call-panel:#173a36; --call-accent:#20b57a; --call-red:#ed5c63; }
.call-page { box-sizing:border-box; min-height:100dvh; max-width:1040px; padding:30px 24px; background:#f4f7f6; color:#213b35; font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif; }
.call-page h1 { font-size:23px; letter-spacing:-.6px; }
.call-page .sub { color:#637970; font-size:14px; }
.call-page button { min-height:48px; cursor:pointer; transition:background .15s,box-shadow .15s; }
.call-page button:focus-visible,#chat-view button:focus-visible { outline:3px solid #40cda4; outline-offset:3px; }
.call-page button:disabled { cursor:wait; opacity:.62; }
.call-page .hide,.call-page [hidden],#chat-view [hidden],#cd-room-lobby[hidden],#cd-live[hidden],#cd-ring[hidden] { display:none!important; }
.call-page #ready { border:1px solid #dde8e2; border-radius:26px; padding:28px; background:#fff; max-width:560px; margin:24px auto; text-align:center; }
.call-page #readyTip { border:0; background:#f4f8f6; box-shadow:none; font-size:14px; }
.call-page #call { background:var(--call-accent); border-radius:16px; min-height:56px; }
.call-page #dead { max-width:560px; margin:24px auto; border-radius:22px; }
.call-page .foot { max-width:660px; margin:24px auto 0; color:#64776f; font-size:12px; }
.call-page #live,.call-page #liveBox,#cd-live,#cd-room-lobby { box-sizing:border-box; color:#effbf5; background:radial-gradient(ellipse at 25% 8%,#31554c 0,transparent 50%),linear-gradient(150deg,#173c36,#0c2528); border:1px solid #31574d; border-radius:30px; padding:32px 28px 22px; box-shadow:0 22px 72px #0b2b2840; overflow:hidden; }
.call-page #live { display:flex; flex-direction:column; min-height:640px; max-width:660px; margin:12px auto; }
.call-page #liveBox { min-height:min(620px,calc(100dvh - 48px)); max-height:calc(100dvh - 48px); position:fixed; overflow:auto; }
.call-page #state,.call-page #liveState,#cd-live-state { font-size:23px; line-height:1.5; text-align:center; font-weight:650; margin:12px 0 4px; }
.call-page #tip,.call-page #liveTip,#cd-live-tip { color:#c1d9cf; text-align:center; font-size:14px; line-height:1.6; }
.call-page #callClock,.call-page #call-clock,#cd-clock { font-size:15px; color:#bee4d3; font-variant-numeric:tabular-nums; text-align:center; letter-spacing:2px; margin:8px 0 18px; }
.call-participants { display:flex; justify-content:center; gap:42px; align-items:center; padding:25px 0 32px; margin:auto 0; }
.call-person { display:flex; flex-direction:column; align-items:center; gap:12px; min-width:80px; font-size:14px; color:#def1e5; }
.call-avatar { display:grid; place-items:center; width:90px; height:90px; border-radius:28px; background:linear-gradient(145deg,#e8f7df,#bbdcc4); color:#2a5e48; border:1px solid #d5f0df; font-size:32px; font-weight:650; box-shadow:0 10px 30px #061d2526; }
.call-avatar.self { width:68px; height:68px; border-radius:23px; background:linear-gradient(145deg,#e2eee7,#b5c9c8); color:#365c53; font-size:24px; }
.call-link-line { display:flex; align-items:center; gap:5px; color:#8fc8b0; font-size:12px; }
.call-link-line i { width:4px; height:18px; border-radius:3px; background:currentColor; }
.call-link-line i:nth-child(2n) { height:30px; }
.call-page #videoBox,.call-page #deskVideoBox,#cd-video-box { position:relative!important; flex:1; border-radius:20px; overflow:hidden; background:#081e21; margin-bottom:16px!important; }
.call-page #remoteVideo,.call-page #deskRemoteVideo,#cd-remote-video { display:block; width:100%!important; min-height:240px; height:min(55dvh,480px); max-height:none!important; object-fit:contain; background:#081e21; border-radius:18px!important; }
.call-page #localVideo,.call-page #deskLocalVideo,#cd-local-video { position:absolute!important; top:14px; right:14px!important; bottom:auto!important; width:104px!important; height:142px; object-fit:cover; border-radius:16px!important; background:#203f38; border:2px solid #cae6d7; box-shadow:0 5px 20px #0005; }
.call-page #videoBox:not(.hide)~.call-participants { display:none; }
.call-controls { display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin:24px 0 8px; }
.call-page .call-controls button,#cd-live .call-controls button { width:auto; flex:1 1 84px; max-width:156px; min-height:60px; border-radius:18px; background:#ffffff17; border:1px solid #ffffff2c; color:#f5fff8; font-size:14px; box-shadow:none; padding:14px 9px; margin:0; }
.call-page button.hang,#cd-hangup,.call-page #hangup { background:var(--call-red)!important; color:#fff!important; border:0!important; box-shadow:0 7px 24px #bd324138; }
.call-page #hangup { min-height:58px; max-width:280px; width:100%; border-radius:18px; align-self:center; margin:18px auto 8px; }
.call-page #mute,.call-page #spk,.call-page #cam,.call-page #camflip,#cd-mute,#cd-cam,#cd-camflip { font-size:14px; }
.call-page #unblock,#cd-unblock { background:#e2f7ed; color:#174b36; border-radius:14px; }
.call-page #spkTip { color:#bdd5ca; font-size:12px; }
.call-page #deskBox { max-width:800px; margin:0 auto; }
/* Main app call overlay shares the connected surface; app-native PiP selectors remain in its original stylesheet. */
#cd-live { position:fixed!important; inset:24px 24px 24px auto; z-index:80; width:min(620px,calc(100vw - 48px)); max-width:none; max-height:calc(100dvh - 48px); overflow:auto; margin:0; display:flex; flex-direction:column; min-height:560px; }
#cd-live #cd-video-box { margin-bottom:16px; }
#cd-live #cd-clock { color:#bee4d3; }
#cd-live #cd-live-tip { color:#c1d9cf; }
#cd-live .call-participants { flex:1; }
#cd-room-lobby { position:fixed; inset:24px 24px 24px auto; z-index:79; width:min(620px,calc(100vw - 48px)); max-height:calc(100dvh - 48px); min-height:520px; display:flex; flex-direction:column; }
#cd-room-lobby h2 { color:#ecfff2; font-size:24px; letter-spacing:-.7px; margin:10px 0; }
#cd-room-lobby p { color:#c9ded3; line-height:1.7; }
#cd-room-lobby .room-kicker { display:flex; align-items:center; gap:8px; color:#a6d4bd; text-transform:uppercase; font-size:12px; letter-spacing:1px; }
#cd-room-lobby .room-kicker::before { content:""; width:7px; height:7px; background:#30c287; border-radius:50%; }
#cd-room-lobby .room-status { padding:13px 16px; background:#ffffff0e; border:1px solid #ffffff1a; border-radius:14px; font-size:14px; }
#cd-room-join { min-height:52px; border-radius:16px; background:var(--call-accent); }
#cd-room-exit { min-height:48px; background:#ffffff12; color:#e6f6ee; border:1px solid #ffffff28; border-radius:16px; }
#chat-view { background:#f6faf7; }
main.split>#chat-view { padding:20px 20px 18px; }
#chat-view>h2 { display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:0 0 6px; padding:0 0 10px; border-bottom:1px solid #e1ebe4; font-size:19px; }
#chat-avatar { border-radius:14px!important; }
#message-pane { background:linear-gradient(180deg,#f6faf7,#edf5ef); border-radius:19px; border:1px solid #dfeae2; overflow:hidden; }
#message-list { padding:22px 36px!important; background:transparent; }
#message-list li:not(.daysep) { border-radius:18px; padding:12px 15px; margin-bottom:18px; max-width:76%; box-shadow:0 2px 6px #23442c05; line-height:1.6; }
#message-list li.out:not(.queued-placeholder):not(.failed-placeholder) { background:#d9f3df; border:1px solid #c2e7cc; border-radius:18px 18px 5px 18px; }
#message-list li.in { background:#fff; border:1px solid #e1e9e4; border-radius:18px 18px 18px 5px; }
#message-list li.out::after,#message-list li.in::after { display:none; }
#message-list li:not(.daysep)::before { position:absolute; top:2px; display:grid; place-items:center; width:24px; height:24px; border-radius:8px; background:#d6e9dc; color:#49745d; font-size:10px; font-weight:600; }
#message-list li.out::before { content:"我"; right:-31px; }
#message-list li.in::before { content:"对方"; left:-31px; background:#e5ece8; color:#66766d; }
#message-list li .meta { margin-top:7px; font-size:11px; opacity:1; }
#message-list li:not(.daysep) > span:not([class]) { white-space:pre-wrap; overflow-wrap:anywhere; }
#composer-shell { margin-top:16px; padding:14px 14px 10px; border:1px solid #dce8df; border-radius:20px; background:#fff; box-shadow:0 3px 16px #1c402308; }
.composer-heading { display:flex; justify-content:space-between; align-items:center; color:#728479; font-size:12px; margin-bottom:9px; }
.composer-heading strong { color:#3b5947; font-weight:600; }
.composer-input-row { display:flex; align-items:stretch; gap:10px; }
#msg-input { flex:1; min-width:0; margin:0; border:0; background:#f3f7f4; border-radius:14px; resize:vertical; min-height:68px; max-height:180px; padding:12px 14px; line-height:1.6; outline-offset:2px; }
#send-btn { align-self:flex-end; min-height:50px; min-width:82px; padding:12px 18px; border-radius:14px; background:#159b65; color:#fff; border:0; box-shadow:none; font-size:14px; }
#send-btn:disabled { opacity:.55; }
#composer-hint { margin:8px 1px 7px; color:#8b9b90; font-size:11px; line-height:1.6; }
#composer-actions { display:flex; flex-wrap:wrap; gap:6px; border-top:1px solid #edf2ee; padding-top:10px; margin-top:7px; }
#composer-actions button { min-height:38px; margin:0; padding:7px 11px; border-radius:11px; border:1px solid transparent; color:#546d5d; background:#f4f8f5; font-size:12px; }
#composer-actions button:hover { color:#087f50; border-color:#bfe4cd; background:#eef8f1; }
#callsend-toggle { background:#e3f4e9!important; color:#167a4a!important; }
#callsend-box { margin-top:12px; padding:14px; border:1px solid #dbe9df; background:#f5faf6; border-radius:15px; }
.room-quick-actions { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-bottom:14px; }
.room-quick-actions button { text-align:left; display:flex; align-items:center; gap:11px; min-height:64px; padding:12px; border:1px solid #d5e8db; border-radius:13px; background:#fff; color:#2d5c3f; font-size:14px; }
.room-quick-icon { display:grid; place-items:center; width:34px; height:34px; border-radius:11px; background:#e7f5eb; color:#239764; font-size:20px; }
.room-quick-actions small { display:block; font-weight:400; color:#879c8b; font-size:11px; margin-top:3px; }
#room-invite-preview { display:flex; align-items:center; gap:10px; margin:9px 0 0; padding:10px 12px; background:#eef8f0; border:1px solid #d3eada; border-radius:12px; color:#386148; font-size:12px; }
#room-invite-preview button { margin-left:auto; border:0; padding:4px 8px; background:transparent; color:#6f8978; min-height:28px; }
#attach-preview { border-radius:17px; border:1px solid #cce3d4; box-shadow:none; background:#fff; }
#attach-send { border-radius:12px; min-height:42px; background:#159b65; }
#chat-view button.danger { color:#b63840; }
@media(max-width:600px) {
  .call-page { padding:16px 12px 24px; }
  .call-page #ready { padding:22px 18px; border-radius:21px; }
  .call-page #live,.call-page #liveBox { min-height:calc(100dvh - 170px); padding:24px 18px 20px; border-radius:24px; }
  .call-person { min-width:64px; }
  .call-participants { gap:24px; padding:30px 0; }
  .call-avatar { width:78px; height:78px; border-radius:25px; }
  .call-page #localVideo,.call-page #deskLocalVideo,#cd-local-video { width:88px!important; height:116px; }
  #cd-live,#cd-room-lobby { inset:0; width:100%; max-height:100dvh; height:100dvh; border-radius:0; padding:28px 20px calc(24px + env(safe-area-inset-bottom)); }
  #cd-live #cd-remote-video { height:55dvh; }
  main.split>#chat-view { padding:13px 10px; }
  #message-list { padding:18px 30px!important; }
  #message-list li:not(.daysep) { max-width:84%; font-size:14px; }
  #composer-shell { padding:12px 10px 9px; border-radius:17px; }
  #composer-hint { font-size:10px; }
  #composer-actions { gap:5px; }
  #composer-actions button { padding:7px 9px; }
  #send-btn { padding:12px; min-width:74px; }
}
@media(prefers-reduced-motion:reduce) { .call-page button { transition:none; } }

html.pip .call-participants{display:none!important}
#cd-video-box:not([hidden])~.call-participants,#deskVideoBox:not(.hide)~.call-participants{display:none}

/* Use the available viewport for media and keep primary controls visible. */
#cd-live { transform:none!important; min-height:0; }
.call-page #live { position:fixed; inset:20px; z-index:80; width:min(660px,calc(100vw - 40px)); height:calc(100dvh - 40px); min-height:0; max-width:none; margin:0 auto; padding:24px; overflow:auto; }
.call-page #live #videoBox,#cd-live #cd-video-box { flex:1 1 auto; min-height:160px; position:relative; }
.call-page #live #remoteVideo,#cd-live #cd-remote-video { position:absolute; inset:0; width:100%; height:100%; min-height:0; }
.call-page #live #state,.call-page #live #tip,.call-page #live #callClock,.call-page #live #unblock,.call-page #live .call-controls,.call-page #live #hangup,#cd-live>div:not(#cd-video-box) { flex-shrink:0; }
.call-page #live .call-participants { flex:1 1 auto; }
.call-page #live .call-controls { margin:14px 0 6px; }
.call-page #live #hangup { margin:8px auto 0; }
.call-page #live #unblock { min-height:42px; }
#cd-live #cd-unblock { min-height:42px; }
.call-advanced-options summary { cursor:pointer; color:#68816f; font-size:12px; padding:6px 0; }
.call-advanced-options[open] summary { margin-bottom:10px; }
.call-advanced-options .row { gap:8px; margin-bottom:10px; }
.call-advanced-options select { min-width:0; max-width:100%; flex:1 1 170px; }
.call-advanced-options .muted { flex-basis:100%; font-size:12px; }
:root[data-theme="dark"] #chat-view { background:var(--surface-2); }
:root[data-theme="dark"] #message-pane { background:var(--surface-2); border-color:var(--line); }
:root[data-theme="dark"] #message-list li.in,:root[data-theme="dark"] #composer-shell,:root[data-theme="dark"] .room-quick-actions button { background:var(--surface); color:var(--ink); border-color:var(--line); }
:root[data-theme="dark"] #message-list li.out { background:#244d3c; color:var(--ink); border-color:#34624e; }
:root[data-theme="dark"] #msg-input,:root[data-theme="dark"] #callsend-box,:root[data-theme="dark"] #composer-actions button { background:var(--surface-2); color:var(--ink); border-color:var(--line); }
@media(max-width:600px) {
  .call-page #live { inset:0; width:100%; height:100dvh; border-radius:0; border:0; padding:20px 18px calc(18px + env(safe-area-inset-bottom)); }
  .call-page #live .call-controls { gap:8px; }
  .call-page #live .call-controls button { flex:1 1 65px; min-width:0; max-width:none; min-height:52px; padding:10px 5px; font-size:12px; }
  .call-page #live #state { margin:8px 0 2px; }
  .call-page #live #callClock { margin:6px 0 8px; }
  .composer-heading>span { display:none; }
  #callsend-box { padding:10px; }
  .room-quick-actions { gap:7px; margin-bottom:7px; }
  .room-quick-actions button { padding:9px; gap:7px; font-size:13px; }
  .room-quick-icon { width:28px; height:28px; font-size:18px; }
}

.room-quick-actions button:hover { background:#edf8f1; border-color:#b5dac4; color:#24583a; }
:root[data-theme="dark"] .room-quick-actions button:hover { background:#244d3c; color:var(--ink); }
@media(max-width:600px) {
  body:has(#chat-view:not([hidden])) > .shell > nav { flex-wrap:nowrap; overflow-x:auto; width:100%; min-width:0; gap:12px; padding-bottom:5px; }
  body:has(#chat-view:not([hidden])) > .shell > nav > span.nav-group:not([hidden]) { flex-wrap:nowrap; flex:0 0 auto; gap:5px; }
  body:has(#chat-view:not([hidden])) > .shell > nav > span.nav-group > span.nav-title { display:none; }
  body:has(#chat-view:not([hidden])) > .shell > nav button { white-space:nowrap; min-height:40px; }
  body:has(#chat-view:not([hidden])) > .shell > nav > details.nav-group { flex:0 0 auto; }
}

.call-page #live #state,html:not(.pip) .call-page #liveBox #liveState { color:#f3fff5; }
.call-page #live #state.bad,html:not(.pip) .call-page #liveBox #liveState.bad { color:#ffb5b8; }

/* Native PiP owns the compact layout; shared full-call dimensions must not expand it. */
html.pip .call-page #liveBox { min-height:0; max-height:none; overflow:hidden; background:Canvas; color:CanvasText; border:0; }
html.pip .call-page #deskRemoteVideo { min-height:0; }
html.pip .call-page #deskVideoBox { border-radius:0; }

/* The MP popup uses the shared RTC controls and a dedicated invitation lobby. */
.call-page #mpInviteBox { box-sizing:border-box; display:flex; flex-direction:column; color:#effbf5; background:radial-gradient(ellipse at 25% 8%,#31554c 0,transparent 50%),linear-gradient(150deg,#173c36,#0c2528); border:1px solid #31574d; border-radius:30px; padding:32px 28px 22px; box-shadow:0 22px 72px #0b2b2840; min-height:560px; max-height:calc(100dvh - 48px); overflow:auto; }
#mpInviteBox h2 { margin:10px 0 0; text-align:center; color:#effbf5; font-size:24px; }
#mpInviteBox .mp-call-kicker { text-align:center; color:#a6d4bd; font-size:12px; letter-spacing:2px; }
#mpInviteBox .call-participants { flex:1; padding:50px 0; }
#mpInviteBox .tip { color:#c1d9cf; }
#mpInviteBox .state { font-size:20px; }
#mpInviteBox #mpInviteJoin,#mpInviteBox #mpInviteExit { min-height:54px; border-radius:18px; }
body.mp-call-focus > h1,body.mp-call-focus > .sub,body.mp-call-focus > .foot { display:none; }
body.mp-call-focus #deskBox > div:not(#liveBox):not(#ringBox) { display:none; }
html:not(.pip) body.mp-call-focus #mpInviteBox,html:not(.pip) body.mp-call-focus #liveBox,html:not(.pip) body.mp-call-focus #ringBox { top:24px; width:min(560px,calc(100vw - 48px)); }
@media(max-width:600px) {
  html:not(.pip) body.mp-call-focus #mpInviteBox,html:not(.pip) body.mp-call-focus #liveBox { inset:0; transform:none; width:100%; height:100dvh; min-height:0; max-height:100dvh; border:0; border-radius:0; padding:28px 20px calc(20px + env(safe-area-inset-bottom)); }
}