/* Daily Life Doc, round 13 (zone B4): a call that is on, drawn the same on both sides (the page "Expert Plans",
   "During a call"): the client's call page from the link (link.html, js/l/l-call.js) and the expert's call view
   (index.html, js/calls/call-live.js; its frame is in css/calls.css). The join card (.cjoin), the ring with the other
   side's initial and the timer (.incall), the round buttons Mute · Camera or Ask for video · End (.cbar .cb), the
   video tiles with the own one small in a corner (.cvid .vtile), and "Turn on camera?" (.camq). */

/* The client's page: the call fills the phone's screen. */
.lk.lkc { min-height: calc(100dvh - 48px); padding: 0; overflow: hidden; position: relative; gap: 0; }
.cjoin { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px 20px; text-align: center; }
.cjoin .bav { width: 76px; height: 76px; border-radius: 50%; background: var(--app); color: var(--sage-d); display: grid; place-items: center; font-weight: 600; font-size: var(--t-xxl); }
.cjoin b { font-size: var(--t-l); line-height: 1.25; }
.cjoin .small { font-size: var(--t-xs); color: var(--ink2); max-width: 300px; }
.cjoin .cwhen { font-size: var(--t-m); font-weight: 500; color: var(--ink); }
.gob { align-self: stretch; margin-top: 12px; min-height: 52px; border-radius: 14px; background: var(--ink); color: var(--surface); font: 600 var(--t-m) var(--font);
  transition: transform var(--m-press) var(--ease-out); }
.gob:active { transform: scale(.97); }
.gob[disabled] { background: var(--soft); color: var(--ink3); }
.cpage { flex: 1; display: flex; flex-direction: column; min-height: calc(100dvh - 48px); position: relative; }
.cnote { margin: 0 16px; padding: 8px 12px; border-radius: 12px; background: var(--try-bg); color: var(--try-d) !important; font-size: var(--t-sm) !important; text-align: center; }
@media (max-width: 480px) { .lk.lkc { min-height: calc(100dvh - 24px); } .cpage { min-height: calc(100dvh - 24px); } }

/* The ring: the other side's initial, breathing while the call is on. */
.incall { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; position: relative; min-height: 0; padding: 20px 0; }
.ring { position: relative; width: 96px; height: 96px; display: grid; place-items: center; margin-bottom: 8px; }
.ring::before { content: ''; position: absolute; inset: -10px; border-radius: 50%; background: color-mix(in srgb, var(--sage) 28%, transparent); opacity: .5; }
.ring.on::before { animation: call-speak 1.8s ease-in-out infinite; opacity: 1; }
.ring span { position: relative; width: 96px; height: 96px; border-radius: 50%; background: var(--app); color: var(--sage-d); display: grid; place-items: center; font-weight: 600; font-size: var(--t-xxl); }
.incall b { font-size: var(--t-l); }
.timer { font-size: var(--t-sm); color: var(--ink3); font-variant-numeric: tabular-nums; }
@keyframes call-speak { 50% { transform: scale(1.08); opacity: .55; } }

/* The round buttons. */
.cbar { display: flex; justify-content: center; gap: 18px; padding: 12px 10px 18px; }
.cb { display: flex; flex-direction: column; align-items: center; gap: 5px; font: 500 var(--t-2xs) var(--font); color: var(--ink2); background: none; border: 0; padding: 0; cursor: pointer; }
.cb i { width: 48px; height: 48px; border-radius: 50%; background: var(--soft); color: var(--ink); display: grid; place-items: center; font-style: normal;
  transition: background .3s, color .3s, transform var(--m-press) var(--ease-out); }
.cb:active i { transform: scale(.92); }
.cb.on i { background: var(--ink); color: var(--surface); }
.cb.end i { background: #C8404F; color: #fff; }
.cb.wait i { animation: dd-wait 1.2s ease-in-out infinite; }
/* base.css sizes every svg to its box: the icon stays small inside the circle, as the page draws it. */
.cb i svg { width: 20px; height: 20px; flex: none; }
.cb.end i svg { width: 22px; height: 22px; }

/* Video: the other side large, this side small in the corner. */
.cvid { flex: 1; position: relative; margin: 12px 12px 0; min-height: 0; display: flex; animation: dd-fade .5s ease both; }
.vtile { position: relative; border-radius: 16px; overflow: hidden; background: linear-gradient(160deg, #5B7D74, #22303C); display: grid; place-items: end center; }
.vtile > svg { width: 62%; height: auto; color: rgba(255, 255, 255, .28); }
.vtile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* The name on a tile (plan.css styles a bare .tn as a 34 px badge on the expert's page: every part is set here). */
.vtile .tn { position: absolute; left: 10px; bottom: 9px; width: auto; height: auto; display: block; line-height: 1.5; font-size: var(--t-2xs); font-weight: 500;
  color: #fff; background: rgba(0, 0, 0, .35); border-radius: 999px; padding: 1px 9px; z-index: 1; }
.vtile.me { background: linear-gradient(160deg, #7C6A5A, #2E2A33); }
.cvid .vtile:first-child { flex: 1; min-height: 320px; }
.cvid .vtile.me { position: absolute; right: 10px; bottom: 10px; width: 31%; aspect-ratio: 3 / 4; box-shadow: 0 4px 14px rgba(0, 0, 0, .3); }
.vtile.me video { transform: scaleX(-1); }

/* "Turn on camera?" over the client's call. */
.camq { position: absolute; left: 12px; right: 12px; bottom: 16px; background: var(--surface); border: 1px solid var(--cardline); border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25); padding: 16px 14px 12px; display: flex; flex-direction: column; gap: 10px; text-align: center; z-index: 3;
  animation: dd-rise .35s var(--ease-out) both; }
.camq b { font-size: var(--t-m); }
.camq .small { font-size: var(--t-sm); color: var(--ink2); }
.camq .acts { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.camq .acts .pill { padding: 10px; font-size: var(--t-s); }