/* ==========================================================================
   components/toggles.css — settings toggle (.tgl) and prompt toggle (.prompt-tog)
   ========================================================================== */

/* === Settings toggle (34×19) === */

.tgl {
  width: 34px;
  height: 19px;
  background: var(--surface3);
  border-radius: 10px;
  position: relative;
  cursor: pointer;
  transition: background 0.2s;
  flex-shrink: 0;
}

.tgl.on {
  background: var(--accent);
}

.tgl::after {
  content: "";
  position: absolute;
  top: 2.5px;
  left: 2.5px;
  width: 14px;
  height: 14px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
}

.tgl.on::after {
  transform: translateX(15px);
}

/* === Prompt toggle (36×20) — slightly larger variant === */

.prompt-tog {
  width: 36px;
  height: 20px;
  background: var(--surface3);
  border-radius: 10px;
  position: relative;
  cursor: pointer;
  transition: background 0.2s;
  flex-shrink: 0;
}

.prompt-tog.on {
  background: var(--accent);
}

.prompt-tog::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
}

.prompt-tog.on::after {
  transform: translateX(16px);
}