/* Call history card (chat/render.js's callCardHtml) — sits inside a normal
   .msg bubble like any other attachment card, just for kind:'call'. */
.call-card { display: flex; align-items: center; gap: 10px; }
.call-card-icon { width: 30px; height: 30px; border-radius: 50%; background: rgba(110,138,47,.22); display: grid; place-items: center; flex-shrink: 0; }
.call-card-icon svg { width: 15px; height: 15px; fill: var(--accent2); }
.call-card-body { display: flex; flex-direction: column; gap: 1px; }
.call-card-body b { font-size: 14px; }
.call-card-body span { font-size: 12px; color: var(--muted); }

/* Clochat call screens: incoming/outgoing ringing overlay and the active
   call UI (audio shows just an avatar; video shows the remote feed full
   screen with a small draggable local preview). Controls always sit
   pinned to the bottom edge (justify-content:space-between on the overlay
   plus no auto-margins fighting it on the inner blocks). */
.call-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: linear-gradient(180deg, #16210a, #0b1020 70%);
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding: calc(env(safe-area-inset-top) + 48px) 20px calc(env(safe-area-inset-bottom) + 24px);
}
.call-active-video.call-overlay { background: #000; }

.call-center { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 10%; }
.call-center-active { margin-top: 0; }

.call-avatar {
  width: 108px; height: 108px; border-radius: 50%;
  background: linear-gradient(135deg, #4d6422, #3a5018);
  display: grid; place-items: center; font-size: 42px; font-weight: 700; color: #fff;
}
.call-username { font-size: 19px; font-weight: 700; color: #fff; }
.call-status { font-size: 14px; color: rgba(255,255,255,.7); }
.call-active .call-status#callTimer { font-size: 16px; color: #fff; font-weight: 600; }
.call-muted-tag {
  margin-top: 6px; font-size: 12px; font-weight: 700; color: #ff5b5e;
  background: rgba(224,56,59,.16); padding: 3px 10px; border-radius: 10px;
}

.call-audio-unlock {
  border: 0; border-radius: 20px; padding: 10px 18px; font-size: 13px; font-weight: 600;
  background: rgba(255,255,255,.16); color: #fff; margin: 14px 0; cursor: pointer;
}

.call-controls {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 16px; row-gap: 14px; padding-top: 10px; width: 100%; max-width: 360px;
}
.call-controls-incoming { gap: 56px; }

.call-btn {
  width: 56px; height: 56px; border-radius: 50%; border: 0; display: grid; place-items: center;
  cursor: pointer; flex-shrink: 0; position: relative;
}
.call-btn svg { width: 24px; height: 24px; }
.call-btn-end { background: #e0383b; }
.call-btn-accept { background: #6e8a2f; }
.call-btn-toggle { background: rgba(255,255,255,.16); }
.call-btn-toggle.call-btn-on { background: var(--accent2, #6e8a2f); }
/* "off" state (muted mic / camera disabled) — a clear diagonal strike
   across the icon rather than just a subtle color shift, so it reads at a
   glance whether mic/camera are on or off. */
.call-btn-toggle.call-btn-off { background: rgba(224,56,59,.35); }
.call-btn-toggle.call-btn-off::after {
  content: ''; position: absolute; left: 8px; right: 8px; top: 50%; height: 2px;
  background: #fff; transform: rotate(-45deg); border-radius: 2px;
}

.call-remote-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.call-local-video {
  position: fixed; top: calc(env(safe-area-inset-top) + 16px); right: 16px; left: auto;
  width: 96px; height: 132px; border-radius: 14px; object-fit: cover;
  background: #111; border: 1px solid rgba(255,255,255,.2); z-index: 2;
  cursor: grab; touch-action: none;
}
.call-local-video.mirrored { transform: scaleX(-1); }
.call-active-video .call-status#callTimer {
  position: absolute; top: calc(env(safe-area-inset-top) + 16px); left: 16px; z-index: 1;
  background: rgba(0,0,0,.4); padding: 4px 10px; border-radius: 10px;
}
.call-active-video .call-muted-tag {
  position: absolute; top: calc(env(safe-area-inset-top) + 52px); left: 16px; z-index: 1; margin-top: 0;
}
.call-active-video .call-muted-tag-remote {
  top: calc(env(safe-area-inset-top) + 84px);
}
.call-active-video .call-controls, .call-active-video .call-audio-unlock { position: relative; z-index: 1; }

/* Floating pill shown while a call is minimized — lets the rest of the
   app stay usable. Sits as a sibling of #root (appended to document.body
   directly, see calls.js), so it survives shell.js screen swaps. */
.call-pill {
  position: fixed; left: 50%; transform: translateX(-50%);
  top: calc(env(safe-area-inset-top) + 66px); z-index: 190;
  display: flex; align-items: center; gap: 8px;
  background: rgba(20,28,12,.92); backdrop-filter: blur(10px);
  border-radius: 20px; padding: 7px 14px 7px 10px; color: #fff; font-size: 13px; font-weight: 600;
  box-shadow: 0 4px 16px rgba(0,0,0,.35); cursor: pointer;
}
.call-pill-dot { width: 8px; height: 8px; border-radius: 50%; background: #6e8a2f; flex-shrink: 0; animation: callPillPulse 1.6s infinite; }
.call-pill-name { color: rgba(255,255,255,.75); font-weight: 500; }
@keyframes callPillPulse { 0%,100%{opacity:1} 50%{opacity:.35} }