/* Voice calls: a full-screen call on phones, a floating card on larger screens. */
.vc-overlay{position:fixed;inset:0;z-index:2000;display:flex;color:#f4fbfa;background:radial-gradient(120% 70% at 50% 0%,#1f5b57 0%,#0f2f33 45%,#091b1f 100%);font-family:inherit}
.vc-card{display:grid;grid-template-rows:auto 1fr auto auto;justify-items:center;gap:18px;width:100%;min-height:100%;padding:calc(18px + env(safe-area-inset-top)) 22px calc(34px + env(safe-area-inset-bottom));text-align:center;box-sizing:border-box}
.vc-top{display:flex;align-items:center;justify-content:center;width:100%;position:relative;min-height:40px}
.vc-secure{display:inline-flex;align-items:center;gap:6px;margin:0;font-size:.8rem;letter-spacing:.02em;color:#bfe3dc}
.vc-minimise{position:absolute;right:-6px;top:0;display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:50%;background:transparent;color:inherit;cursor:pointer}
.vc-minimise:hover,.vc-minimise:focus-visible{background:#ffffff1f}
.vc-overlay:is([data-status=incoming],[data-status=over]) .vc-minimise{visibility:hidden}
.vc-person{align-self:center;display:grid;justify-items:center;gap:6px;min-width:0;max-width:100%}
.vc-avatar{position:relative;display:grid;place-items:center;width:112px;height:112px;border-radius:50%;background:#2f7d74;font-size:2.6rem;font-weight:700;margin-bottom:10px}
.vc-avatar img{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;object-fit:cover}
.vc-avatar::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:2px solid #7fe0cf66;opacity:0}
.vc-overlay:is([data-status=incoming],[data-status=ringing]) .vc-avatar::after{animation:vc-pulse 1.8s ease-out infinite}
@keyframes vc-pulse{0%{transform:scale(.92);opacity:.9}100%{transform:scale(1.25);opacity:0}}
.vc-name{margin:0;font-size:clamp(1.5rem,6vw,2rem);line-height:1.2;color:inherit;overflow-wrap:anywhere}
.vc-handle{margin:0;color:#bfe3dc;font-size:.95rem}
.vc-status{margin:0;min-height:1.5em;font-size:1.05rem;font-variant-numeric:tabular-nums;color:#e4f6f2}
.vc-actions{display:flex;justify-content:center;gap:clamp(28px,12vw,64px);flex-wrap:wrap;min-height:92px}
.vc-round{display:grid;justify-items:center;gap:8px;border:0;background:none;color:inherit;font:inherit;font-size:.85rem;cursor:pointer;padding:0}
.vc-round-icon{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:#ffffff26;transition:transform .15s ease,background .15s ease}
.vc-round:hover .vc-round-icon{transform:scale(1.05)}
.vc-round:focus-visible{outline:none}.vc-round:focus-visible .vc-round-icon{outline:3px solid #fff;outline-offset:3px}
.vc-danger .vc-round-icon{background:#e5484d}
.vc-accept .vc-round-icon{background:#1f9d55}
.vc-overlay[data-status=incoming] .vc-accept .vc-round-icon{animation:vc-nudge 1.6s ease-in-out infinite}
@keyframes vc-nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.vc-quiet[aria-pressed=true] .vc-round-icon{background:#f4fbfa;color:#0f2f33}
.vc-pill{display:none}
.vc-overlay.is-minimised{inset:auto;background:none;pointer-events:none}
.vc-overlay.is-minimised .vc-card{display:none}
.vc-overlay.is-minimised .vc-pill{pointer-events:auto;position:fixed;left:50%;transform:translateX(-50%);bottom:calc(14px + env(safe-area-inset-bottom));display:inline-flex;align-items:center;gap:10px;max-width:calc(100vw - 32px);padding:10px 18px;border:0;border-radius:999px;background:#0f2f33;color:#f4fbfa;font:inherit;font-weight:600;font-variant-numeric:tabular-nums;box-shadow:0 10px 30px #0006;cursor:pointer}
.vc-pill-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vc-dot{flex:none;width:9px;height:9px;border-radius:50%;background:#3ddc84;box-shadow:0 0 0 4px #3ddc8433}
.vc-remote{display:none}
@media (min-width:720px){
  .vc-overlay{inset:auto 24px 24px auto;width:340px;min-height:460px;border-radius:26px;box-shadow:0 24px 70px #0007}
  .vc-card{min-height:460px;padding:18px 22px 28px}
  .vc-overlay.is-minimised{width:auto;min-height:0;box-shadow:none}
  .vc-overlay.is-minimised .vc-pill{left:auto;right:24px;bottom:24px;transform:none}
}
@media (prefers-reduced-motion:reduce){.vc-overlay *{animation:none!important;transition:none!important}}

/* Call buttons on chats, JanSaathis and the call history. */
.vc-call-button{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:6px 12px;border:1px solid var(--line,#d6e1e3);border-radius:999px;background:var(--paper,#fff);color:var(--teal,#0f6b62);font:inherit;font-size:.88rem;font-weight:600;cursor:pointer}
.vc-call-button:hover,.vc-call-button:focus-visible{background:var(--teal-100,#e3f3f0)}
.jm-chat-heading .vc-call-button{width:40px;height:40px;min-height:0;padding:0;border:0;background:transparent}
.jm-chat-heading .vc-call-button span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Calls page */
.vc-page{max-width:1080px}
.vc-page-head h1{margin:.1em 0 .25em}
.vc-page-head>p:not(.eyebrow){max-width:62ch;color:var(--muted,#5b6b70)}
.vc-page-links{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:10px}
.vc-feedback{min-height:1.4em;margin:10px 0}
.vc-page-layout{display:grid;gap:24px;align-items:start}
@media (min-width:860px){.vc-page-layout{grid-template-columns:minmax(0,1fr) 320px}}
.vc-list,.vc-live-list{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.vc-row{border-radius:14px;padding:10px 8px}
.vc-row:hover{background:var(--theme-soft,#f2f7f7)}
.vc-row-main{display:flex;align-items:center;gap:12px;min-width:0}
.vc-row-avatar{position:relative;flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--teal-100,#e3f3f0);color:var(--teal,#0f6b62);font-weight:700}
.vc-row-avatar img{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;object-fit:cover}
.vc-row-text{display:grid;gap:2px;min-width:0;flex:1}
.vc-row-text strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vc-row-text small{display:flex;align-items:center;gap:6px;color:var(--muted,#5b6b70);min-width:0}
.vc-row-text small span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vc-row.is-missed .vc-row-text :is(strong,small){color:var(--danger,#b42318)}
.vc-row-actions{display:flex;align-items:center;gap:6px;flex:none}
.vc-row-menu{position:relative}
.vc-row-menu summary{list-style:none;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;cursor:pointer;font-size:1.2rem;color:var(--muted,#5b6b70)}
.vc-row-menu summary::-webkit-details-marker{display:none}
.vc-row-menu[open] summary{background:var(--theme-soft,#f2f7f7)}
.vc-row-menu>div{position:absolute;right:0;top:40px;z-index:5;display:grid;min-width:150px;padding:6px;border:1px solid var(--line,#d6e1e3);border-radius:12px;background:var(--paper,#fff);box-shadow:var(--shadow,0 12px 30px #0002)}
.vc-row-menu>div button{padding:9px 12px;border:0;border-radius:8px;background:none;color:var(--ink,#16282c);font:inherit;text-align:left;cursor:pointer}
.vc-row-menu>div button:hover{background:var(--theme-soft,#f2f7f7)}
.vc-report{display:grid;gap:8px;margin:10px 0 4px 56px}
.vc-report h3{margin:0;font-size:1rem}.vc-report p{margin:0;color:var(--muted,#5b6b70);font-size:.9rem}
.vc-report label{display:grid;gap:4px}
.vc-report-actions{display:flex;gap:8px;flex-wrap:wrap}
.vc-empty{display:grid;justify-items:center;gap:6px;padding:40px 16px;text-align:center;color:var(--muted,#5b6b70)}
.vc-empty strong{color:var(--ink,#16282c)}
.vc-side{display:grid;gap:16px}
.vc-side :is(form,section){padding:18px;border-radius:16px;background:var(--theme-soft,#f2f7f7)}
.vc-side h2{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:1.05rem}
.vc-side p{margin:8px 0 0;color:var(--muted,#5b6b70);font-size:.92rem;line-height:1.5}
.vc-toggle{display:flex;align-items:flex-start;gap:10px;font-weight:600}
.vc-toggle input{margin-top:3px;width:18px;height:18px;flex:none}
@media (max-width:560px){
  .vc-call-back span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .vc-call-back{width:40px;height:40px;padding:0}
  .vc-report{margin-left:0}
  .vc-row-text small{align-items:flex-start}
  .vc-row-text small svg{margin-top:3px;flex:none}
  .vc-row-text small span{white-space:normal}
}

/* Group calls: a grid of people; speaking voices glow. */
.vc-group .vc-card{display:flex;flex-direction:column;align-items:center;gap:14px;height:100%}
.vc-group .vc-grid{flex:1 1 auto;align-content:center;min-height:0;overflow-y:auto}
.vc-group-head{display:grid;gap:4px;justify-items:center;max-width:100%}
.vc-group .vc-name{font-size:clamp(1.25rem,5vw,1.6rem)}
.vc-grid{list-style:none;margin:0;padding:0;align-self:center;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:100%;max-width:420px}
@media (min-width:480px) and (max-width:719px){.vc-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.vc-tile{position:relative;display:grid;justify-items:center;gap:4px;padding:14px 8px 10px;border-radius:18px;background:#ffffff14;min-width:0}
.vc-tile strong{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.92rem}
.vc-tile small{min-height:1.2em;color:#bfe3dc;font-size:.75rem;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vc-tile-avatar{position:relative;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:#2f7d74;font-size:1.5rem;font-weight:700;box-shadow:0 0 0 0 #3ddc8400;transition:box-shadow .15s ease}
.vc-tile-avatar img{position:absolute;inset:0;width:100%;height:100%;border-radius:50%;object-fit:cover}
.vc-tile.is-speaking .vc-tile-avatar{box-shadow:0 0 0 4px #3ddc84}
.vc-tile.is-failed{opacity:.6}
.vc-tile-menu{position:absolute;top:4px;right:4px}
.vc-tile-menu summary{list-style:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;cursor:pointer;color:#e4f6f2}
.vc-tile-menu summary::-webkit-details-marker{display:none}
.vc-tile-menu[open] summary{background:#ffffff26}
.vc-tile-menu>div{position:absolute;right:0;top:34px;z-index:3;display:grid;min-width:170px;padding:6px;border-radius:12px;background:#f4fbfa;box-shadow:0 12px 30px #0006}
.vc-tile-menu>div button{padding:9px 12px;border:0;border-radius:8px;background:none;color:#0f2f33;font:inherit;font-size:.88rem;text-align:left;cursor:pointer}
.vc-tile-menu>div button:hover{background:#dff2ee}
.vc-tile-menu>div button[data-confirm=yes]{color:#b42318;font-weight:700}
.vc-notice{margin:0;min-height:1.3em;color:#ffe2a8;font-size:.9rem;text-align:center}
@media (min-width:720px){
  .vc-overlay.vc-group{width:380px}
  .vc-group .vc-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .vc-group .vc-tile-avatar{width:52px;height:52px;font-size:1.2rem}
}
/* "A voice call started" card */
.vc-invite-card{position:fixed;z-index:1990;left:50%;transform:translateX(-50%);bottom:calc(16px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:12px;width:min(420px,calc(100vw - 32px));padding:12px 12px 12px 14px;border-radius:18px;background:#0f2f33;color:#f4fbfa;box-shadow:0 16px 40px #0007;box-sizing:border-box}
.vc-invite-card>div{display:grid;gap:2px;min-width:0;flex:1}
.vc-invite-card strong{font-size:.92rem;line-height:1.3}
.vc-invite-card small{color:#bfe3dc}
.vc-invite-icon{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#1f9d55}
.vc-invite-join{flex:none;padding:9px 16px;border:0;border-radius:999px;background:#1f9d55;color:#fff;font:inherit;font-weight:700;cursor:pointer}
.vc-invite-close{flex:none;width:32px;height:32px;border:0;border-radius:50%;background:transparent;color:#bfe3dc;font-size:1.3rem;cursor:pointer}
@media (min-width:720px){.vc-invite-card{left:auto;right:24px;transform:none;bottom:24px}}
/* Group buttons and the calls page */
.vc-group-button.is-live{background:#1f9d55;border-color:#1f9d55;color:#fff}
.jm-chat-heading .vc-group-button.is-live{background:transparent;color:#1f9d55}
.js-work-head .vc-group-button{margin-left:auto}
.vc-main{display:grid;gap:22px;min-width:0}
.vc-main h2{display:flex;align-items:center;gap:8px;margin:0 0 6px;font-size:1.05rem}
.vc-live-dot{width:9px;height:9px;border-radius:50%;background:#1f9d55;box-shadow:0 0 0 4px #1f9d5533}
.vc-live-badge{padding:4px 10px;border-radius:999px;background:#1f9d55;color:#fff;font-size:.8rem;font-weight:700}
.vc-group-avatar{background:#dff2ee;color:#1f7a50}
.vc-new-group>.button{display:inline-flex;align-items:center;gap:8px}
.vc-picker{display:grid;gap:10px;margin-top:12px;padding:16px;border-radius:16px;background:var(--theme-soft,#f2f7f7)}
.vc-picker>p{margin:0;color:var(--muted,#5b6b70)}
.vc-picker-list{list-style:none;margin:0;padding:0;display:grid;gap:2px;max-height:320px;overflow:auto}
.vc-picker-list label{display:flex;align-items:center;gap:12px;padding:8px;border-radius:12px;cursor:pointer}
.vc-picker-list label:hover{background:var(--paper,#fff)}
.vc-picker-list label>span:not(.vc-row-avatar){display:grid;flex:1;min-width:0}
.vc-picker-list small{color:var(--muted,#5b6b70)}
.vc-picker-list input{width:20px;height:20px;flex:none}
.vc-picker-actions{display:flex;align-items:center;justify-content:space-between;gap:12px}

/* Video: the other person's camera or shared screen fills the call; your own
   camera is a small preview. Controls sit over a soft shade. */
.vc-stage{position:absolute;inset:0;pointer-events:none;overflow:hidden;border-radius:inherit}
.vc-overlay .vc-card{position:relative;z-index:1}
.vc-main-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000;z-index:0}
.is-presentation .vc-main-video{object-fit:contain}
.vc-self-video,.vc-side-video{position:absolute;z-index:2;width:28vw;max-width:150px;aspect-ratio:3/4;object-fit:cover;border-radius:14px;background:#000;box-shadow:0 8px 24px #0008}
.vc-self-video{right:14px;top:calc(64px + env(safe-area-inset-top))}
.vc-side-video{left:14px;top:calc(64px + env(safe-area-inset-top))}
.is-mirrored{transform:scaleX(-1)}
.vc-presenting-chip{position:absolute;z-index:2;left:50%;top:calc(64px + env(safe-area-inset-top));transform:translateX(-50%);margin:0;padding:6px 14px;border-radius:999px;background:#1f9d55;color:#fff;font-weight:700;font-size:.85rem;white-space:nowrap}
.vc-fullscreen{position:absolute;z-index:3;pointer-events:auto;right:14px;bottom:calc(150px + env(safe-area-inset-bottom));display:grid;place-items:center;width:42px;height:42px;border:0;border-radius:50%;background:#000a;color:#fff;cursor:pointer}
.vc-overlay.has-remote-video{background:#000}
.has-remote-video .vc-card{background:linear-gradient(to bottom,#000a 0,#0000 22%,#0000 62%,#000c 100%)}
.has-remote-video .vc-avatar,.has-remote-video .vc-handle{display:none}
.has-remote-video .vc-person{align-self:start}
.has-remote-video .vc-name{font-size:1.25rem;text-shadow:0 1px 6px #000}
.vc-overlay:is(.has-video) .vc-actions{gap:clamp(12px,4.5vw,32px)}
.vc-overlay:is(.has-video) .vc-round-icon{width:56px;height:56px}
.vc-round{min-width:56px}
/* Group video tiles and the presenter's screen */
.vc-tile-video{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;background:#000}
.vc-tile.has-video .vc-tile-avatar{display:none}
.vc-tile.has-video.is-speaking .vc-tile-video{box-shadow:0 0 0 3px #3ddc84}
/* While someone presents, their screen takes all the room the controls leave;
   people sit in one scrollable row underneath. */
.vc-group-stage{display:none;position:relative;width:100%;border-radius:16px;overflow:hidden;background:#000}
.is-presentation .vc-group-stage{display:flex;flex-direction:column;flex:1 1 auto;min-height:120px}
.vc-group-stage .vc-main-video{position:static;display:block;width:100%;flex:1 1 auto;min-height:0;height:100%;object-fit:contain}
.vc-group-stage .vc-fullscreen{top:10px;right:10px;bottom:auto}
.vc-stage-caption{margin:0;padding:8px 12px;font-size:.85rem;color:#e4f6f2;background:#0f2f33;flex:none}
.vc-group-stage:not(:has(video)){flex:none;min-height:0}
.vc-group-stage:not(:has(video)) .vc-stage-caption{padding:18px 12px;text-align:center;background:#1f9d55;color:#fff;font-weight:700}
.vc-group.is-presentation .vc-grid{display:flex;flex:none;width:100%;max-width:none;gap:6px;overflow-x:auto;overflow-y:hidden;align-content:normal}
.vc-group.is-presentation .vc-tile{flex:0 0 92px;padding:8px 4px 6px}
.vc-group.is-presentation .vc-tile-avatar{width:40px;height:40px;font-size:1rem}
.vc-group.is-presentation .vc-tile small{display:none}
.vc-group.is-presentation .vc-tile-video{aspect-ratio:1}
@media (min-width:720px){
  .vc-overlay.has-video,.vc-overlay.vc-group.has-video{inset:24px;width:auto;min-height:0}
  .vc-overlay.has-video .vc-card{min-height:100%}
  .vc-self-video,.vc-side-video{width:200px;max-width:none;aspect-ratio:4/3}
  .vc-group.has-video .vc-grid{max-width:none;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
  .vc-group.has-video .vc-tile-avatar{width:72px;height:72px;font-size:1.6rem}
  .vc-group.is-presentation .vc-tile{flex-basis:130px}
  .vc-fullscreen{bottom:150px}
}
