/* Wik Desktop -- the call screen (pack L, wave L2). port: CallActivity.kt:365 onCreate -- a full-screen column: a flexible gap, the
   picture (112 dp), a flexible gap, the "Name - Time" line in the accent, the icon rows (side padding 4 dp, bottom 16 dp). The frame's
   colour is c_bg (CallActivity.kt:441 frame setBackgroundColor(c_bg)). Class prefix .call- (CONTRACT_D2 §9.16, pack L). */
.call-screen {
  position: fixed;
  inset: 0;
  pointer-events: auto;        /* the overlays host is pointer-events:none (base.css .wk-overlays); no z-index: a dialog this screen opens
                                  later in the same host stacks above it by DOM order */
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--c-bg);
  color: var(--c-text);
  user-select: none;
  outline: none;
}
.call-gap { flex: 1 1 0; min-height: 8px; }
.call-pic { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
/* the line wraps its content; the NAME is its one shrinking child (it ellipsizes, the time stays whole) -- CallActivity.kt:381-417 */
.call-line {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  justify-content: center;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0 48px 12px 48px;   /* HitBox.TOUCH_DP sides, NAME_LINE_BOTTOM_DP under */
  color: var(--c-accent-shown);
}
.call-name {
  flex: 0 1 auto;
  min-width: 0;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.call-sep, .call-status { flex: 0 0 auto; white-space: pre; font-weight: 700; }
.call-sep[hidden], .call-status:empty { display: none; }
.call-buttons {
  flex: 0 0 auto;
  width: 100%;
  box-sizing: border-box;
  padding: 0 4px 16px 4px;     /* ROW_SIDE_DP, the 16 dp under the rows */
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 64px;            /* the rows' place is kept while they are empty (a refusal, the end) -- no jump (§3.3) */
}
.call-row { display: flex; flex-direction: row; justify-content: center; align-items: center; width: 100%; }
/* W2e CALL-VIDEO (W1/69): THEIR video behind the column (CallActivity.kt:938 renderVideo -- remoteView under the column, their camera
   filling the screen), MY camera's preview above it (CallPip: placed by call.js placeSelf through transform, sized by the frame's ratio,
   its corner 0.6 of the trademark corner -- W2a clipShape when present, else the radius call.js writes). The column's children are
   positioned so they paint over the video by DOM order; no z-index (the overlays host stacks dialogs by DOM order, base.css). */
.call-gap, .call-pic, .call-line, .call-buttons { position: relative; }
.cv-remote {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;         /* W1/94 C1 (a), his words: "make it fit screen of the desktop app, so user saw the whole video and not
                                  only cropped part" -- the WHOLE picture, letterboxed on c_bg (Android CallActivity.kt:916
                                  SCALE_ASPECT_FIT); was cover, a centre crop (W1/57 B80's camera fill -- a deliberate desktop deviation
                                  from Android's camera fill, his words above) */
  background: var(--c-bg);
  pointer-events: none;
}
.cv-remote[hidden], .cv-self[hidden] { display: none; }
.cv-self {
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  background: #000;
  touch-action: none;
  cursor: grab;
}
.cv-self-video { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }   /* SCALE_ASPECT_FILL, never mirrored */
/* W1/94 C1 (a): the call screen full screen (the element itself, call.js fullTap) -- the page's colour behind the letterbox */
.call-screen:fullscreen { width: 100%; height: 100%; background: var(--c-bg); }
.call-screen::backdrop { background: var(--c-bg); }
/* W1/94 C1 (b): a missing device's icon in the row -- dimmed, still a button (CallActivity.kt:145 BT_DIM_ALPHA 0.38) */
.call-row .call-absent { opacity: 0.38; }
/* W1/94 C1 (c): THEIR missing devices -- the eye's style (CallActivity.kt:464 ctlEye: no disc, 24 dp glyphs, alpha 0.5, the accent ink)
   at the LEFT edge, its centre on the name line's text (call.js placeLacks writes `top`); never takes a tap */
.call-lacks {
  position: absolute;
  left: 12px;
  top: 0;
  display: flex;
  flex-direction: row;
  gap: 4px;
  opacity: 0.5;
  color: var(--c-accent-shown);
  pointer-events: none;
}
.call-lacks[hidden] { display: none; }
.call-lacks-glyph { display: block; width: 24px; height: 24px; }
/* W1/99 DCALL: the eye (CallActivity.kt:473 ctlEye) -- a 24 px glyph (EYE_DP) with no disc in a 48 px box (HitBox.TOUCH_DP), alpha 0.5
   (EYE_ALPHA), the name line's ink, at the RIGHT edge, its centre on the name line's text (call.js placeEye writes `top`). It never fades
   and never hides with the icons; shown only while they auto-hide (call.js applyEye: hidden otherwise). */
.call-eye {
  position: absolute;
  right: 0;
  top: 0;
  width: 48px;
  height: 48px;
  padding: 12px;
  box-sizing: border-box;
  margin: 0;
  border: 0;
  background: none;
  opacity: 0.5;
  color: var(--c-accent-shown);
  cursor: pointer;
}
.call-eye[hidden] { display: none; }
.call-eye-glyph { display: block; width: 24px; height: 24px; }
/* W1/99 DCALL AMENDMENT 1 (To Wik): THE SAME screen element as a small window over the Wik UI (never re-parented: the remote <video>
   carries the call's sound) -- CallOverlay.kt: their video (contain), else their picture on the page colour; no name, no icons, no
   preview, no eye, no X. call.js placeMini writes width / height / transform (the 'call.preview' place and level). */
.call-screen.call-mini {
  inset: auto;
  left: 0;
  top: 0;
  overflow: hidden;
  justify-content: center;
  cursor: pointer;               /* its corner: 0.6 of the trademark corner, written by call.js toWik (CallOverlay.kt WikClipFrame) */
  touch-action: none;
}
.call-screen.call-mini .call-line,
.call-screen.call-mini .call-buttons,
.call-screen.call-mini .call-gap,
.call-screen.call-mini .cv-self,
.call-screen.call-mini .call-lacks,
.call-screen.call-mini .call-eye { display: none; }
.call-screen.call-mini .call-pic { position: absolute; inset: 0; transform-origin: 50% 50%; }
.call-screen.call-mini:focus-visible { outline: 2px solid var(--c-accent-shown); outline-offset: -2px; }
.call-mini-grip { display: none; }
.call-screen.call-mini .call-mini-grip {
  display: block;
  position: absolute;
  right: 0;
  bottom: 0;
  width: 18px;
  height: 18px;
  cursor: nwse-resize;
  background: linear-gradient(135deg, transparent 50%, var(--c-accent-shown) 50%);
  opacity: 0.8;
}
.cv-self-grip {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 18px;
  height: 18px;
  cursor: nwse-resize;
  background: linear-gradient(135deg, transparent 50%, var(--c-accent-shown) 50%);
  opacity: 0.8;
}