/*
 * SG Chat Web Client — E2EE toggle styling.
 * New file, additive only (see docs/wave4-6-web-client-architecture.md §2.2).
 *
 * Lives inside .call-controls on the call screen, which the call.css sibling
 * is restyling toward a DARK theme. tokens.css's --color-text/--color-border
 * etc. are tuned for the light app chrome, so on the dark call stage they'd
 * render as near-invisible dark-on-dark text. Rather than hardcode raw hex,
 * we use tokens.css's brand hues (--color-accent/--color-success) for
 * interactive state and semi-transparent white (an intentional, commented
 * exception — see tokens.css's own note that this is fine when a genuine
 * value gap exists) for text/borders so this control stays legible on any
 * background, light or dark.
 */
.e2ee-toggle-wrap {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  transition: border-color var(--duration-fast) var(--ease-standard),
    background var(--duration-fast) var(--ease-standard);
}

.e2ee-toggle-wrap:has(input[type="checkbox"]:checked) {
  border-color: var(--color-success);
  background: rgba(63, 214, 176, 0.16); /* --sg-mint tint, kept as rgba() since var(--color-success-soft) is a light-theme surface tone, not built for a dark call stage */
}

.e2ee-toggle-wrap label {
  cursor: pointer;
  user-select: none;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  /* NOT white-on-dark: this control lives in its own .call-controls div,
     a sibling of #call-video-grid (not nested inside it) — see index.html.
     Only #call-video-grid itself goes dark (only while tiles are present);
     the surrounding #view-call chrome, including this toggle, is always on
     the light app background. Confirmed via a real headless screenshot +
     vision check of the pre-join Call screen, which showed invisible
     white-on-white text before this fix. */
  color: var(--color-text);
}

.e2ee-toggle-wrap input[type="checkbox"]:disabled + label,
.e2ee-toggle-wrap.disabled label {
  cursor: not-allowed;
  opacity: 0.55;
}

.e2ee-toggle-wrap input[type="checkbox"] {
  cursor: pointer;
  accent-color: var(--color-success);
  width: 16px;
  height: 16px;
}

.e2ee-toggle-wrap input[type="checkbox"]:disabled {
  cursor: not-allowed;
}

.e2ee-status {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: var(--color-text-muted); /* see label rule above: dark-on-light before join, overridden to white in-call */
  margin-left: var(--space-1);
}